모바일 @midia 설정
본문
pc 페이지하고 보니 모바일버전이 틀어져서요ㅠ
@midia 넣어서 잡으려고 하는데
어떻게 수정하면 되는지 확인 가능할까요 ㅠ
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>
<style>
.page-content { }
.sect-title { padding-bottom: 2.4rem; text-align: center; }
.tit2 {font-size: 2.8rem; font-weight: 600; }
.subtit { font-size: 1.4rem; font-weight: 400; }
.sec_wrap {}
.comment {font-size:24px; line-height:42px; color:#000; margin-bottom: 70px; }
.sec_wrap .conts_area1 {width: 100%; display:inline-block; vertical-align:top; padding-bottom: 160px; }
.sec_wrap .conts_area1 .img_box {width: 100%; height:650px; margin-bottom: 55px; background-image:url('<?=THEMA_URL?>/img/about_1.jpg');}
.sec_wrap .conts_area1 .img_box img {width: 100%; }
.sec_wrap .conts_area1 .tit {float: left; width: 710px; font-size:46px; line-height:50px; color:#000; font-weight:500; }
.sec_wrap .conts_area1 .txt {float: left; width: 530px; font-size:18px; line-height:34px; color:#333333;}
.sec_wrap .conts_area2 {position:relative; height: 640px; padding-top: 118px; padding-left: 820px; box-sizing: border-box; margin-bottom: 170px; }
.sec_wrap .conts_area2 .img_box {width: 1040px; height:640px; position:absolute; left:-330px; top:0px; background-image:url('<?=THEMA_URL?>/img/about_2.jpg');}
.sec_wrap .conts_area2 .img_box img {width: 100%; }
.sec_wrap .conts_area2 .tit {font-size:46px; line-height:64px; color:#000; font-weight:500; margin-bottom: 90px; }
.sec_wrap .conts_area2 .txt {font-size:18px; line-height:34px; color:#333333;}
.sec_wrap .conts_area3 {position:relative; height: 640px; padding-top: 118px; box-sizing: border-box; margin-bottom: 90px; }
.sec_wrap .conts_area3 .img_box {width: 940px; height:640px; position:absolute; right:-330px; top:0px; background-image:url('<?=THEMA_URL?>/img/about_3.jpg');}
.sec_wrap .conts_area3 .img_box img {width: 100%; }
.sec_wrap .conts_area3 .tit {font-size:46px; line-height:64px; color:#000; font-weight:500; margin-bottom: 90px; }
.sec_wrap .conts_area3 .txt {font-size:18px; line-height:34px; color:#333333;}
@media (max-width: 1023px) {
.sec_wrap .conts_area1 { width:calc(100% - 10px); padding:40px 30px; margin:0 20px 20px 0; }
.sec_wrap .conts_area1:nth-child(2n) {margin-right:0;}
.sec_wrap .conts_area1:nth-child(3n) {margin-right:0px;}
}
@media (max-width: 767px) {
.sec_wrap {padding:0 30px;}
.sec_wrap .conts_area1 { width:100%; text-align:center; margin:15px 0;}
.sec_wrap .conts_area1:nth-child(3n) {margin-right:0px;}
}
@media (max-width: 1023px) {
.sec_wrap .conts_area2 { width:calc(100% - 10px); padding:40px 30px; margin:0 20px 20px 0; }
.sec_wrap .conts_area2:nth-child(2n) {margin-right:0;}
.sec_wrap .conts_area2:nth-child(3n) {margin-right:0px;}
}
@media (max-width: 767px) {
.sec_wrap {padding:0 30px;}
.sec_wrap .conts_area2 { width:100%; text-align:center; margin:15px 0;}
.sec_wrap .conts_area2:nth-child(3n) {margin-right:0px;}
}
@media (max-width: 1023px) {
.sec_wrap .conts_area3 { width:calc(100% - 10px); padding:40px 30px; margin:0 20px 20px 0; }
.sec_wrap .conts_area3:nth-child(2n) {margin-right:0;}
.sec_wrap .conts_area3:nth-child(3n) {margin-right:0px;}
}
@media (max-width: 767px) {
.sec_wrap {padding:0 30px;}
.sec_wrap .conts_area3 { width:100%; text-align:center; margin:15px 0;}
.sec_wrap .conts_area3:nth-child(3n) {margin-right:0px;}
}
</style>
<div class="page-content">
<div class="sect-title">
<p class="tit2">Lorem ipsum dolor sit amet,</p>
<p class="subtit">Lorem ipsum dolor sit amet, ea ius prima melius temporibus,</p>
</div>
<div class="sec_wrap">
<div class="conts_area1">
<div class="img_box"></div>
<h3 class="tit">Lorem ipsum dolor</h3>
<div class="txt">
Lorem ipsum dolor sit amet, <br>
Lorem ipsum dolor sit amet, <br>
Lorem ipsum dolor sit amet,
</div>
</div>
<div class="conts_area2">
<div class="img_box"></div>
<h3 class="tit">Lorem ipsum dolor<br>Lorem ipsum dolor</h3>
<div class="txt">
Lorem ipsum dolor sit amet, <br>
Lorem ipsum dolor sit amet, <br>
Lorem ipsum dolor sit amet, <br><br>
Lorem ipsum dolor sit amet, ea ius prima melius temporibus, <br>
diam populo offendit te est.
</div>
</div>
<div class="conts_area3">
<div class="img_box"></div>
<h3 class="tit">Lorem ipsum dolor<br>Lorem ipsum dolor</h3>
<div class="txt">
Lorem ipsum dolor sit amet, <br>
Lorem ipsum dolor sit amet, <br>
Lorem ipsum dolor sit amet, <br><br>
Lorem ipsum dolor sit amet, ea ius prima melius temporibus, <br>
diam populo offendit te est.
</div>
</div>
</div>
</div>
답변을 작성하시기 전에 로그인 해주세요.
