모바일 화면에서 상품 상세 정보의 좌우 여백 전체를 제거하거나, 상품 상세 정보 이미지의 좌우 여백만 제거할 수 있어요.
모바일 상품 상세 정보 좌우 여백 제거하기
상품 상세 페이지의 본문 영역에 아래의 HTML 소스코드를 입력하면 모바일에서 상품 상세 정보의 좌우 여백을 제거할 수 있어요.
HTML 섹션의 데이터 유형을 기기별로 선택하고, 모바일 영역에 코드를 입력해 주세요.
<style>
[class*="ProductDetailInfo"] {
padding-left: 0;
padding-right: 0;
}
</style>
HTML
복사
모바일 상품 상세 정보 이미지 좌우 여백 제거하기
상품 상세 페이지의 본문 영역에 아래의 HTML 소스코드를 입력하면 모바일에서 상품 상세 정보 이미지 좌우 여백을 제거할 수 있어요.
HTML 섹션의 데이터 유형을 기기별로 선택하고, 모바일 영역에 코드를 입력해 주세요.
<style>
[class*="ProductDetailInfoT01styled__ProductDetailInfo"],
[class*="ProductDetailInfo_contents"],
[class*="ProductDetailInfo_description-wrapper"] {
padding-left: 0;
padding-right: 0;
}
[class*="ProductDetailInfoT01styled__ProductDetailInfo"] [class*="RichTextContents"] > *:not(p:has(img)):not(.image):not(blockquote),
[class*="ProductDetailInfo_contents"] [class*="RichTextContents"] > *:not(p:has(img)):not(.image):not(blockquote) {
padding: 0 20px;
}
[class*="ProductDetailInfoT01styled__ProductDetailInfo"] [class*="RichTextContents"] p img,
[class*="ProductDetailInfo_contents"] [class*="RichTextContents"] p img {
padding-left: 0;
padding-right: 0;
display: block;
}
[class*="ProductDetailInfoT01styled__ProductDetailInfo"] [class*="RichTextContents"] blockquote,
[class*="ProductDetailInfo_contents"] [class*="RichTextContents"] blockquote {
margin-right: 1.5em;
margin-left: 1.5em;
}
</style>
HTML
복사
HTML 섹션 안내서로 돌아가기
식스샵 프로 가이드로 돌아가기