반응 CSS가 가로 방향으로 작동하지 않습니다.

반응 형 웹 사이트를 구현하고 있습니다. 정상적인 방향으로 태블릿과 스마트 폰에서 을 작동하지만수평으로 뒤집 으면 디자인이 뒤죽박죽이됩니다. 바닥 글이 올라간 웹 사이트의 크기를 수동으로 조정할 때 이 바닥에 머물러 있습니다.반응 CSS가 가로 방향으로 작동하지 않습니다.

저는 며칠 동안 노력해 왔습니다. 비슷한 문제가 있다면 알려주세요.

내 코드 :

<body> 
     <!--Header--> 
      <div class="header_container"> 
       <div class="logo"> 
        <a href="index.html"><img src="#" alt="Lorem ipsum dolor" align="center"/></a> 
       </div> 
      </div> 
<!--Content--> 
     <div class="content_container"> 
       <div class="middle"> 
        <div class="middle-item"> 
         <div class="loading"> 
          <img src="./img/icon/ajax-loader.gif" align="center" /> 
         </div> 
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p> 
         <p class="small">Lorem ipsum dolor sit amet.</p> 
         <a class="btn-play-grey" href="#" target="_blank"><img src="#"/></a> 
        </div> 
       </div> 
     </div> 
<!--Footer section--> 
     <div class="footer_container"> 
       <div class="link_footer"> 

         <span class="copyright">All Content Copyright @ Lorem Ipsum Co., Ltd. | Find us on </span><a target="_blank" href="#"><img src="./img/icon/instagram.png"/></a> 

       </div> 
     </div> 
    </body>

/* CSS ================================ ================== */

* { 
    margin: 0; 
    padding: 0; 
    list-style:none; 
} 

html, 
body { height: 100%; } 

/* Body 
================================================== */ 
body { 
    background: url('../img/bg/large/intro.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    font-family: 'Roboto', sans-serif; 
    line-height: 1.25; 
    list-style: none; 
    text-decoration: none; 
    margin:0; 
    padding:0; 
    position: relative; 
    min-height:100%; 
} 

/* Header 
================================================== */ 
.header_container { 
    position: relative; 
    background: #e5e5e5; 
    padding: 21px 0; 
    width: 100%; 
} 

.logo { 
    width: 181px; 
    height: 33px; 
    padding-left: 105px; 
} 

/* Content 
================================================== */ 
.content_container { 
    margin: 0 auto; 
    zoom: 1; 
} 

.content_container .middle{ 
    position: absolute; 
    text-align: center; 
    left:0; 
    right:0; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    padding-bottom: 70px; 
} 

.content_container .middle .middle-item p { 
    font-size: 20px; 
    color: #70cbd1; 
    padding-top: 70px; 
    margin-left: 40px; 
    margin-right: 40px; 
} 

.content_container .middle .middle-item .small { 
    font-size: 18px; 
    color: #ffffff; 
    padding-bottom: 9px; 
} 

.content_container .middle .middle-item .btn-play-grey img{ 
    height: 65px; 
    width: 201px; 
} 

/* Footer 
================================================== */ 
.footer_container { 
    background: #e5e5e5; 
    width: 100%; 
    bottom:0; 
    height: 70px; 
    position: absolute; 
} 

.footer_container .link_footer { 
    font-size: 16px; 
    padding-right: 105px; 
    padding-top: 23px; 
    font-size: 16px; 
    font-weight: 300; 
    text-align: right; 
    clear:both; 
} 

.footer_container .link_footer img { 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 24px auto; 
    width: 24px; 
    height: 24px; 
    vertical-align: middle; 
} 

@media only screen and (max-width: 768px) and (orientation : landscape){ 

    html, body { 
     /*  height: auto;*/ 
     background-image: url('../img/bg/small/intro.jpg'); 
    } 

    .logo { 

     padding-left: 25px; 
    } 

    .footer_container .link_footer { 
     padding-right: 0; 
     text-align: center; 
     padding-left: 0; 
    } 
}

출처

2014-11-09 Midriel

당신이 참조 할 것을 예를 제공 할 수 화면에? 당신은 문제를 재현하는 최소한의 HTML과 CSS를 만들 수 있습니까? –

시도 당신이 메타 태그를 추가는 머리 :

<meta name="viewport" content="width=device-width, initial-scale=1">

출처

2014-11-09 07:18:45

감사합니다. Kamil. 나는 을 사용하고 머리에 그것을 추가했지만 아무런 차이가없는 것처럼 보였다. 문제는 내용과 꼬리말에 있다고 생각합니다. 다른 아이디어가 있습니까? – Midriel

반응 CSS가 가로 방향으로 작동하지 않습니다.

답변

관련 문제