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>
AI에 의해 자동 생성된 답변이에요 😀
안녕하세요! 워드프레스 전문가입니다.
문제를 해결하기 위해 먼저 확인해야 할 부분은 웹사이트의 CSS 스타일과 HTML 구조입니다. 제공해주신 코드를 보면, .container 클래스가 800px로 고정된 너비를 가지고 있습니다. 이 부분을 수정하여 메인페이지에 맞게 조절해야 할 것 같습니다.
또한, 하위페이지에 추가한 Raw HTML 코드가 메인페이지의 스타일과 충돌하여 정렬이 틀어지는 것으로 보입니다. 이 경우에는 하위페이지에 추가한 스타일을 조정하거나, 메인페이지와 하위페이지의 스타일이 충돌하지 않도록 조치해야 할 것입니다.
더 자세한 도움이 필요하시면 다시 문의해주세요! 함께 해결해 나갈 수 있도록 최선을 다하겠습니다. 감사합니다.
↓ 아래 버튼을 눌러서 피드백해주세요.