에디터와 상세페이지 화면이 다르게 나옵니다.
본문
며칠 동안 찾고 있는데 잘 안되네요..
https://www.eco-seobu.co.kr/shop/item.php?it_id=1756779692
답변 주신 분이 url을 보내주면 확인이 된다고 해서 보내드립니다.
에디터에서는 백그라운드가 가운데 정열되고 글자에 그림자도 잘 들어가는데
상세페이지에서는 왼쪽으로 치우쳐있고 글자에 그림자도 없습니다.
f12 눌러서 확인해 보니 css영향을 받는 거 같던데 제가 이 부분을 어떻게 해야 할지 몰라서 문의드립니다.
에디터에서 만든 그대로 상세페이지에서 구현되려면 어떻게 해야 하는지 도움 부탁드려요.
답변 4
해당 div 요소에 min-width:100%; 코드 추가해 보세요.
네 감사합니다. 고맙습니다.
background-size: 100% auto;
이거 하나 추가해보세요.
고맙습니다.
문제의 원인은 부모요소 #sit_inf_explan 를 체크하셔야합니다. 다음과 같습니다.
#sit_inf_explan {
margin: 0 0 10px;
width: auto !important;
width: 718px;
overflow: hidden;
}
// 부모요소를 보면 넓이값은 이미 고정으로 718px를가지고잇습니다. 그리고 넓이값을 auto 강제 인포텐 하고있어서문제가 보입니다.
아니면 !important; 를지워버리셔도되구요
즉 자식이 부모를 뛰어넘을수는 없다라는뜻입니다. 그래서 한마디로 718px 부모에게 같힐 수밖에 없으니 문제가 발생 하는것이지요
다음과 같이 수정을해주세요
그리고 부모가 넓이를 800px를가지고잇으니 그렇면 다시 위에 정의 의된 자식은 월래되로 100프로 주던가 아니면 800이하를 주던가 하면됩니다.
또한 여기서 최대값800px 는 본인ui에 맞게 수정을 하시면되겠습니다.
참고로 요소위치는 skin/shop/basic/style.css 안에 정의 되어있을것입니다.
#sit_inf_explan {
margin: 0 auto;
width: 100%;
max-width: 800px;
overflow: visible;
}
<div style="margin:0 auto;max-width:718px;height:180px;line-height:180px;
background:url(https://www.eco-seobu.co.kr/data/editor/2509/0d49f69a81ad005c7443f7e193e3d7a9_1756810440_5283.jpg) no-repeat center/cover;
text-align:center;">
<span style="letter-spacing:8px;font-family:NanumGothic,'나눔고딕',sans-serif;
font-weight:bold;color:#FFFFFF;font-size:60px;">풀그만</span>
<span style="letter-spacing:2px;font-family:NanumGothic,'나눔고딕',sans-serif;
font-weight:bold;color:#FFFFFF;font-size:24px;">500ml</span>
</div>
넓이 = 가로길이 X 세로길이
너비 = 가로길이
네 감사합니다.
네 답변 주셔서 감사드립니다. 고맙습니다.