반응형 css 도와주세요!!

반응형 css 도와주세요!!

QA

반응형 css 도와주세요!!

본문

#main{background:#efdbba; width:100%; height:400px;}
    .section{overflow:hidden; width:1300px; margin:0 auto;}
    .main_img{float:left;}
    .main_text{float:left;margin:50px 0 0 200px;}
    .main_text p{color:#fff; line-height:130%; font-size:35px;}
    .main_text p strong{font-size:40px; font-weight:200;}
    .main_btn{
    background:none;
    border:1px solid #fff;
    margin-top:20px;
    padding:15px 32px;
    text-align:center;
    text-decoration: none;
    font-size: 16px;
    color:#fff;
    cursor:pointer;
    }
    .main_btn:hover{background:#fff; color:#000;}

}

 

위에 부분은 css 소스입니다

 

밑에는 html

 

    <div id="main">
        <div class="section">
            <div class="main_img">
                <img src="<?php echo G5_THEME_IMG_URL;?>/main3.png" alt="메인슬라이드1"></div>
            <div>
            <div class="main_text">
                <p><strong>피크는</strong><br>고객의 니즈를 생각하고<br>실현해갑니다</p>
                <button class="main_btn"> 자세히 </button>
            </div>
            </div>
        </div>
    </div>
 </body>

 

인데 반응형으로 할려면 어떻게 해야할까요 ?..

이 질문에 댓글 쓰기 :

답변 2

위 소스의 스타일 부분을 보면

섹션 클래스에 폭이 지정되어 있기 때문에 그 부분에서 반응이되지 않습니다.

section { ... width:1300px; ... }

 

섹센클래스 부분을 width:100% 로 하시면 될것 같네요.

위 꾸러기움님 댓글 이요 >>
width:100% 섹션 부분에 변경 처리 하면 html에 출력되는 글내용들이 하단으로 정렬되버리네요 ㅠㅠ
이 부분요
하단 정렬 되는 것이 아니고
.main_img 의 폭과
.main_text 의 공간을 더하면 가로폭 100% 보다 커져서
한줄 내려가서 정렬된 것입니다. 정상적인 반응입니다.
더구나 텍스트 쓰는 곳은 좌측 마진이 200px 나 되다 보니
화면크기에 따라선 글씨도 세로로 길게 쓰여질수 있겠네요

.main_text 나 .main_img 부분에 보더나 배경색을 넣어서 확인해보세요.

@media screen and (min-width: 1080px) { 

#main{background:#efdbba; width:100%; height:(사이즈 변경);}
    .section{overflow:hidden; width: (사이즈 변경) px; margin:0 auto;}

 

 

}

반응형으로하려면 다 사이즈 만져야합니다 위에소스대로요

답변을 작성하시기 전에 로그인 해주세요.
전체 0
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT