궁금하신 사항을 FAQ를 통해 해결해드립니다.
디자인 > 반응형 스킨
카테고리에서 배너가 모바일에서 보이면 양끝이 잘려 보입니다.
PC)
모바일)
이는 가독성을 위해 의도된 사항으로 슬라이드 배너 잘림 FAQ↗를 참고하시기 바랍니다.
중요 요소는 중앙에, 양끝에는 치장 요소를 배치하는 것이 가장 이상적입니다.
배너 디자인이 가독성이 중요하지 않거나 포기하고 노출하고 싶다면 아래 방법을 따라해보시기 바랍니다.
모바일에서 가독성이나 이미지 사이즈 문제가 없다면 해당 방법을 사용해보실 수 있습니다.
[스킨폴더]/css/user.css 파일 맨 아래에 코드를 추가하시기 바랍니다.
@media only screen and (max-width:1023px) { /* 큰 태블릿 */ .category_edit_area.mobile_img_adjust img{ max-width:100%; margin-left:0; margin-right:0; } } @media only screen and (max-width:767px) { /* 작은 태블릿 */ .category_edit_area.mobile_img_adjust img{ max-width:100%; margin-left:0; margin-right:0; } } @media only screen and (max-width:479px) { /* 모바일 */ .category_edit_area.mobile_img_adjust img{ max-width:100%; margin-left:0; margin-right:0; } }
잘리는 부분을 조금만 줄여 해결이 된다면 [스킨폴더]/css/user.css 파일 맨 아래에 코드를 추가하시고 수치를 조절하시기 바랍니다.
@media only screen and (max-width:1023px) { /* 큰 태블릿 */ .category_edit_area.mobile_img_adjust img{ max-width:120%; margin-left:-10%; margin-right:-10%; } } @media only screen and (max-width:767px) { /* 작은 태블릿 */ .category_edit_area.mobile_img_adjust img{ max-width:140%; margin-left:-20%; margin-right:-20%; } } @media only screen and (max-width:479px) { /* 모바일 */ .category_edit_area.mobile_img_adjust img{ max-width:160%; margin-left:-30%; margin-right:-30%; } }
수치 조정 방법)
한 항목당 %의 합이 100%가 되도록하되, 마이너스의 수치는 균등하게 분배합니다.
140% -20% -20% = 100% 150% -25% -25% = 100%
※ 작업이 끝난후 화면을 다시 확인하실때 브라우저 캐시를 제거하고 보시기 바랍니다. ( CTRL + F5 )
TOP