애니빌드.LAB
토론방
소스관련 반응형/디자인판2.0/모바일웹에서 쇼핑몰매장LIST페이지 관련 문의
- o**rcloset
- 2018-02-23 15:06:06
- hit3622
- http://lab.anybuild.co.kr/bbs/qna/6963
상기 URL에서
메인페이지의 경우, PC / Tablet / Mobile 은 각각 한줄에 5, 5, 3개씩 총 15개씩 추출하도록 설정하였습니다.
제품정보/구매메뉴의 하위인 각 매장LIST도 PC / Tablet / Mobile 은 각각 1페이지 단위로 한줄에 5, 5, 3개씩 15개씩 추출하도록 설정하고 싶습니다.
(모바일에서 한줄에 3개씩 보여줘야 하는 것이 목표입니다.)
http://ourcloset.asadesign.kr/shop_goods/goods_list.htm?category=010*****
http://ourcloset.asadesign.kr/shop_goods/goods_list.htm?category=010*****
http://ourcloset.asadesign.kr/shop_goods/goods_list.htm?category=03000000
http://ourcloset.asadesign.kr/shop_goods/goods_list.htm?category=04000000
및 해당 대분류에 속하는 모든 매장LIST페이지에서 모바일은 3개씩(한줄에) 표현하고 싶습니다.
감사합니다.
게시글 공유
URL복사
댓글작성
열기 닫기
열기 닫기
1. [디자인팜 >메뉴 관리] 에서 페이지 찾기에 다음주소를 입력하고 검색을 합니다.
http://ourcloset.asadesign.kr/shop_goods/goods_list.htm?category=010*****
2. 상품목록 페이지가 출력되면, 소스수정 버튼을 클릭합니다.
3. CSS 소스 버튼을 클릭해서 mobile, tablet, pc 소스를 수정합니다.
# global_responsive_a_shop_mobile
.glores-A-goods-list {
ul {
@extend %ul;
@extend %clear;
border-top:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5;
li {
float:left;width:33.33%;padding:10px;
box-sizing:border-box;
> figure {
img {display:block;width:100%;height:auto}
}
> div {
margin-top:10px;padding:0;
span {
display:block;margin:0;padding:0;font-size:13px;line-height:1.6em;text-align:center;
&.glores-A-subject {
margin-bottom:5px;color:#2a2a2a;font-weight:600;
input[type=checkbox] {vertical-align:middle}
}
&.glores-A-sijung-price {color:#7b7b7b;text-decoration:line-through}
&.glores-A-price {color:#cd1449}
&.glores-A-goods-info {display:none}
&.glores-A-event-icon {display:block;margin-top:5px}
&.glores-A-sold-out {color:#0064cb}
}
p {text-align:center}
}
.glores-A-text {margin:3em 0;text-align:center}
}
.clear3n {clear:left}
.glores-A-empty {width:100% !important;color:#363636;font-size:14px;text-align:center;line-height:300px}
}
}
# global_responsive_a_shop_tablet
.glores-A-goods-list {
ul {
li {width:20%;padding:15px 10px}
.clear3n {clear:none}
.clear5n {clear:left}
}
}
#global_responsive_a_shop_pc
.glores-A-goods-list {
ul {
li {width:20%;padding:15px 10px}
.clear3n {clear:none}
.clear5n {clear:left}
}
}
- 현재 수정이 완료된 상태입니다.
- 직접 숫자를 바꿔서 확인을 해보시기 바랍니다.