모바일에서 정렬갯수ㅠㅠ
관련링크
본문
<!DOCTYPE html>
<html lang="ko">
<head>
<title>이벤트</title>
<link rel="stylesheet" href="http://www.drceviang.com/css/wr_ui.css" />
<style>
/* 팀구성 섹션 */
.wr-section.typeTeam1 {}
.wr-section.typeTeam1 > .inner > ul > li .imgArea {position:relative; overflow:hidden}
.wr-section.typeTeam1 > .inner > ul > li .imgArea:before {position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:#e7e5e2; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease; z-index:10}
.wr-section.typeTeam1 > .inner > ul > li .imgArea img {display:block; width:100%; transition:all .3s ease}
.wr-section.typeTeam1 > .inner > ul > li .imgArea:hover:before {opacity:.5; filter:alpha(opacity='100')}
.wr-section.typeTeam1 > .inner > ul > li .imgArea:hover img {transform:scale(1.1)}
.wr-section.typeTeam1 > .inner > ul > li .infoArea {margin:20px 0; padding-bottom:20px; border-bottom:1px solid #eee}
.wr-section.typeTeam1 > .inner > ul > li .infoArea h3 {font-size:14px; color:#333; font-weight:600; margin-bottom:5px}
.wr-section.typeTeam1 > .inner > ul > li .infoArea span {display:block; font-size:13px; color:#888}
.wr-section.typeTeam1 > .inner > ul > li p {display:-webkit-box; font-size:14px; color:#888; line-height:1.75; -webkit-box-orient:vertical; -webkit-line-clamp:3; max-height:74px; overflow:hidden; text-overflow:ellipsis}
/* media query */
@media screen and (max-width:1024px) {
/* 팀구성 섹션 */
.wr-section.typeTeam1 > .inner > ul > li {margin-bottom:50px}
}
@media screen and (max-width:768px) {
/* 팀구성 섹션 */
.wr-section.typeTeam1 > .inner > ul > li {margin-bottom:40px}
.wr-section.typeTeam1 > .inner > ul > li .infoArea h3 {font-size:14px}
.wr-section.typeTeam1 > .inner > ul > li .infoArea span {font-size:12px}
.wr-section.typeTeam1 > .inner > ul > li p {display:block; font-size:12px; max-height:inherit; -webkit-line-clamp:inherit}
}
/* 팀구성 섹션 */
.wr-section.typeTeam2 {}
.wr-section.typeTeam2 > .inner > ul > li .imgArea {position:relative; overflow:hidden}
.wr-section.typeTeam2 > .inner > ul > li .imgArea:before {position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:#e7e5e2; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease; z-index:10}
.wr-section.typeTeam2 > .inner > ul > li .imgArea img {display:block; width:100%; transition:all .3s ease}
.wr-section.typeTeam2 > .inner > ul > li .imgArea:hover:before {opacity:.5; filter:alpha(opacity='100')}
.wr-section.typeTeam2 > .inner > ul > li .imgArea:hover img {transform:scale(1.1)}
.wr-section.typeTeam2 > .inner > ul > li .infoArea {margin:20px 0; padding-bottom:20px; border-bottom:1px solid #eee}
.wr-section.typeTeam2 > .inner > ul > li .infoArea h3 {font-size:14px; color:#333; font-weight:600; margin-bottom:5px}
.wr-section.typeTeam2 > .inner > ul > li .infoArea span {display:block; font-size:13px; color:#888}
.wr-section.typeTeam2 > .inner > ul > li p {display:-webkit-box; font-size:14px; color:#888; line-height:1.75; -webkit-box-orient:vertical; -webkit-line-clamp:3; max-height:74px; overflow:hidden; text-overflow:ellipsis}
/* media query */
@media screen and (max-width:1024px) {
/* 팀구성 섹션 */
.wr-section.typeTeam2 > .inner > ul > li {margin-bottom:50px}
}
@media screen and (max-width:768px) {
/* 팀구성 섹션 */
.wr-section.typeTeam2 > .inner > ul > li {margin-bottom:40px}
.wr-section.typeTeam2 > .inner > ul > li .infoArea h3 {font-size:14px}
.wr-section.typeTeam2 > .inner > ul > li .infoArea span {font-size:12px}
.wr-section.typeTeam2 > .inner > ul > li p {display:block; font-size:12px; max-height:inherit; -webkit-line-clamp:inherit}
}
</style>
</head>
<body>
<div class="wr-section typeTeam1">
<div class="inner">
<ul class="col-lg-2 col-md-2 col-sm-2">
<li><a href="http://www.drceviang.com/sub/1802.html" target="_blank">
<div class="imgArea" align="center"> <img src="http://www.drceviang.com/img/event-now.jpg" /> </div></a>
<div class="infoArea" align="center">
<div align="right">이달의이벤트</div>
</div></a>
</li>
<li> <a href="http://www.drceviang.com/sub/2018.html" target="_blank">
<div class="imgArea" align="center"><img src="http://www.drceviang.com/img/event-base.jpg" border="0" /></div></a>
<div class="infoArea" align="center">
<div align="right"><img src="http://www.drceviang.com/img/event-base-s.jpg"></div>
</li>
</ul>
</div>
</div>
<div class="wr-section typeTeam2">
<div class="inner">
<ul class="col-lg-3 col-md-2 col-sm-2">
<li>
<div class="imgArea" align="center"><img src="http://www.drceviang.com/img/1801-s.jpg" border="0" /></div>
<div class="infoArea" align="center">
<div align="right"><img src="http://www.drceviang.com/img/event-end-s.jpg"></div>
</li>
<li>
<div class="imgArea" align="center"><img src="http://www.drceviang.com/img/1712-s.jpg" border="0" /></div>
<div class="infoArea" align="center">
<div align="right"><img src="http://www.drceviang.com/img/event-end-s.jpg"></div>
</li>
<li>
<div class="imgArea" align="center"><img src="http://www.drceviang.com/img/1711-s.jpg" border="0" />
</div></a>
<div class="infoArea" align="center">
<div align="right"><img src="http://www.drceviang.com/img/event-end-s.jpg"></div>
</li>
</ul>
</div>
</div>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
CSS
@media screen and (max-width:768px) {
/* section style */
.wr-section {padding:10px 0}
.wr-section > .inner {padding:0 10px}
.wr-section > .inner > .title {margin-bottom:40px}
.wr-section > .inner > .title h2 {font-size:18px}
.wr-section > .inner > .title p {font-size:13px; width:100%}
/* column style (mobile) */
.col-sm-1 {margin-left:0; margin-right:0}
.col-sm-1 > li {width:100%; padding-left:0 !important; padding-right:0 !important}
.col-sm-2 > li {width:47%;list-style: none}
.col-sm-3 > li {width:30%;list-style: none}
.col-sm-4 > li {width:25%}
.col-sm-5 > li {width:20%}
.col-sm-6 > li {width:16.666666666%}
.col-sm-7 > li {width:14.2857142%}
.col-sm-8 > li {width:12.5%}
.col-half {max-width:100%}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
1. 모바일에서 볼때
가로 2개씩 보여지게 썼는데
실제로 보면 1개씩만 나오네요, 아무리 수정해도 안되요, 어디를 고쳐야 할까요ㅠㅠ
그리고
2. 링크한 페이지를 PC에서 보시면 첫번째 배너밑에 "이달의 이벤트" 라고 텍스트로 쓴부분이 깨져서 나와요
그래서 다른데는 이미지로 대체해본건데 텍스트가 정상적으로 나올 방법이 있을까요?? ㅜㅜ 왜 깨지지요
답변 3
bootstrap 사용 하셨는데 임의적으로 수정 하셨나 보네요 max-width 768px 이하의 미디어 쿼리가 있는지 한번더 확인 해 보세요
부트스트랩 미디어쿼리... theme/테마명/css 폴더들어가시면 부트스트랩.min.css 있을꺼에요
거기서 .col-lg-2 이거 검색해보세요 그러면 css 나올텐데
50% 안먹히면 편법으로 50% !important 사용해보셔용
유레카님말처럼 768 이하 미디어쿼리없으면 480 으로 하나더 만들어서 넣으세요 ㅎㅎ
부트스트랩은 768 이하가 따로 존재하지않기때문에 480 아래로 하나 만드시면 될꺼같으세요.
