워드프레스 사이트 크기 맞추기

1. 정확한 제품 또는 플러그인 이름

워드프레스

 

2. 상세 내용

4번의 코드내용을 하위페이지에 Raw HTML을 추가하여 넣어줬는데
메인페이지 사이즈랑 맞지않아 홈페이지 전체 정렬이 틀어집니다.

어느부분을 수정해야할까요?

실제 메인페이지 : http://midion.co.kr/
메인페이지처럼 로고와 메뉴는 고정이되 아래 페이지부분에 내용만 넣고싶습니다.

 

3. 확인 가능한 상세 페이지 주소

http://midion.co.kr/yealink_main/

 

4. 수정한 코드 내역 (있다면)

 

 

<style type="text/css" data-type="vc_custom-css">* {
  -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box; 
}
body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            text-align: center;
        }
        .container {
            width: 100%;
            max-width: 800px;
            clear: both;
            margin: 50px auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

        }
        .product {
            width: calc(25% - 20px);
            margin: 10px;
            background: #fff;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .product-image {
            width: 80%;
            border-radius: 10px;
        }
        .product-title {
            font-size: 18px;
            margin: 10px 0 5px;
        }
        .product-description {
            font-size: 14px;
            color: #555;
            line-height: 1.6;
        }
        .buy-button {
            display: inline-block;
            margin-top: 10px;
            padding: 8px 16px;
            background-color: #007BFF;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
        }
        .buy-button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="product">
            <img src="/wp-content/uploads/yealink/camera/uvc34.png" alt="제품 이미지" class="product-image">
            <h1 class="product-title">UVC34</h1>
          
            <a href="#" class="buy-button">상세보기</a>
        </div>
        <div class="product">
            <img src="/wp-content/uploads/yealink/camera/uvc40.png" alt="제품 이미지" class="product-image">
            <h1 class="product-title">UVC40</h1>
           
            <a href="#" class="buy-button">상세보기</a>
        </div>
        <div class="product">
            <img src="/wp-content/uploads/yealink/camera/uvc84.jpg" alt="제품 이미지" class="product-image">
            <h1 class="product-title">UVC84</h1>
          
            <a href="#" class="buy-button">상세보기</a>
        </div>
        <div class="product">
            <img src="/wp-content/uploads/yealink/camera/uvc85.png" alt="" class="product-image">
            <h1 class="product-title">UVC85</h1>
            
            <a href="#" class="buy-button">상세보기</a>
        </div>
<div class="product">
            <img src="/wp-content/uploads/yealink/camera/uvc86.jpg" alt="" class="product-image">
            <h1 class="product-title">UVC86</h1>
            <a href="#" class="buy-button">상세보기</a>
        </div>
    </div>
</body>
<script>
         $(document).ready(function() {
            var maxHeight = -1;

            $('.inner-both').each(function() {
             maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
            });

            $('.inner-both').each(function() {
             $(this).height(maxHeight);
            });
          });   
      </script>

 

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기