화면 크기가 작을 때 nth-child가 표시되지 않습니다.

여기에 관련성이있는 CSS가 있습니다. 컴퓨터 버전과의 차이는 "(최대 너비 : 1223px)"로 바뀝니다 (최소 너비 : 1224px) ") :화면 크기가 작을 때 nth-child가 표시되지 않습니다.

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    background: #f5f5f5; 
    font-family: 'Open Sans', sans-serif; 
    height: 100%; 
    margin: 0 0 100px; /* bottom = footer height */ 
} 

html { 
    position: relative; 
    min-height: 100%; 
} 

a { 
    text-decoration: none; 
    color: #444; 
} 

a:hover { 
    color: blue; 
} 

section { 
    background: #fff; 
    box-shadow: 0px 2px 2px #ebebeb; 
} 

header { 
    width: 100%; 
    margin: 0 auto; 
    text-align: center; 
    position: relative; 
} 

nav li { 
    display: inline-block; 
    /*padding: 40px 30px 37px 30px;*/ 
    padding-top: 3%; 
    padding-right: 2%; 
    padding-bottom: 3%; 
    padding-left: 2%; 
} 

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (max-width : 1223px) { 
    .logo { 
     /*background: url(logo.png) 50% 0 no-repeat;*/ 
     background: url(http://i48.tinypic.com/2mob6nb.png); 
     background-size: 140px 59px; 
     width: 140px; 
     height: 59px; 
     position: absolute; 
     top: 2%; 
     /* left: 405px; */ 
     left: 38%; 
    } 
    nav li:nth-child(2) { 
     padding-right: 10%; 
    } 
    nav li:nth-child(3) { 
     padding-left: 10%; 
    } 
} 

/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
    .logo { 
     /*background: url(logo.png) 50% 0 no-repeat;*/ 
     background: url(http://i48.tinypic.com/2mob6nb.png); 
     background-size: 140px 59px; 
     width: 140px; 
     height: 59px; 
     position: absolute; 
     top: 20%; 
     /* left: 405px; */ 
     left: 44%; 
    } 
    nav li:nth-child(2) { 
     padding-right: 10%; 
    } 
    nav li:nth-child(3) { 
     padding-left: 10%; 
    } 
} 

#sectionLeft { 
    width: 48%; 
    float: left; 
    padding: 5px; 
} 

#section { 
    width: 48%; 
    float: right; 
    padding: 5px; 
} 

#sectionLeft h2, #section h2 { 
    text-align: center; 
} 

#wrap { 
    width: 100%; 
    margin: 0 auto; 
} 

#newsSection { 
    background: #fff; 
    box-shadow: 0px 2px 2px #ebebeb; 
    text-align: center; 
    margin: 0px 0px 10px 0px; 
} 

#newsText { 
    font-size: 12px; 
} 

footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 2.5%; 
    width: 100%; 
    text-align: center; 
    background-color: #fff; 
    -webkit-box-shadow: 0px -2px 2px 0px #ebebeb; 
    -moz-box-shadow: 0px -2px 2px 0px #ebebeb; 
    box-shadow: 0px -2px 2px 0px #ebebeb; 
    bottom: 0; 
} 

#footerText { 
    font-size: 10px; 
}

와 HTML이 :

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Aversion Gaming</title> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans' 
    rel='stylesheet' type='text/css'> 
<link href='css/style.css' rel='stylesheet' type='text/css'> 
</head> 
<body> 
    <section> 
     <header> 
      <nav> 
       <ul> 
        <li>Home</li> 
        <li>Teams</li> 
        <li>Contact</li> 
        <li>Sponsors</li> 
       </ul> 
      </nav> 
      <div class="logo"></div> 
     </header> 
    </section> 

    <div id="wrap"> 
     <div id="sectionLeft"> 
      <h2>News</h2> 
      <section id="newsSection"> 
       <h3>Test news post</h3> 
       <p id="newsText">This is just a test news post.</p> 
       <a style="font-size: 12px;" href="#">Read More...</a> 
      </section> 
      <section id="newsSection"> 
       <h3>Finally, a website!</h3> 
       <p id="newsText">We have finally created a website thanks to 
        @AversionRastro!</p> 
       <a style="font-size: 12px;" href="#">Read More...</a> 
      </section> 
     </div> 

     <div id="section"> 
      <h2>About</h2> 
      <section id="newsSection"> 
       <p id="newsText"> 
        <b>Aversion Gaming</b> is a newly founded gaming organization. 
       </p> 
      </section> 
     </div> 
    </div> 
    <footer> 
     <p id="footerText">Copyright 2014 Aversion Gaming. Designed and 
      coded by Robert Trainor.</p> 
    </footer> 
</body> 
</html>

내 윈도우 7 노트북에 페이지를로드,이 로고를 (다른 게시물에서 그것을 가지고 표시는 단지 예를 때문에) @media의 모든 형식 지정 코드가 작동합니다.
브라우저를 동일한 컴퓨터의 측면에 고정하면 더 작은 창 크기의 코드가 적용되지 않습니다.

로고가 표시되지 않으며 두 번째 및 세 번째 목록 항목의 서식이 지정되지 않습니다. 그들의 패딩.

제가 누락되었거나 잘못하고있는 것이 있으면 알려주세요.

출처

2014-12-14 Robert Trainor

다른 CSS를 게시 할 수 있습니까? 아마도이 시나리오에 영향을 미칠 것입니다. 그러므로 그것은 관련이 있습니다. –

@MikeLoffland 전체 스타일 시트를 사용하여 게시물을 편집했습니다 –

그리고 함께 제공되는 HTML은 무엇입니까? ;) –

사파리로 코드를 확인한 결과 내 브라우저에서 소스 코드가 제대로 작동하지 않는 것으로 나타났습니다.

코드가 실행되는지 (소스 코드에 표시되는지) 확인 했습니까? 아니면 원하는 대로만 보이지 않습니까?

네비게이션에 패딩을 추가하여 로고 옆에 공백을 추가하여 좀 더 정돈 된 모양으로 보이게하려고하십니까? 그렇다면 내 제안 :

현재 귀하의 로고는 모바일 버전의 중심에 있지 않습니다. 첫 번째 점 그게 전부 약간의 조정을 만들려면 :

.logo { 
    background: url(http://i48.tinypic.com/2mob6nb.png); 
    background-size: 140px 59px; 
    width: 140px; 
    height: 59px; 
    position: absolute; 
    top: 2%; 
    left: 50%; /* center the left side of the logo */ 
    margin-left: -70px; /* go half of the logos width backwards, so that the logos center is centered */ 
}

이 그런 다음 <li> s는 추가 패딩을 받게을하지만, 그들은하지 "블록"으로, 텍스트로 중앙에있다. 왼쪽과 오른쪽에 동일한 공백을 사용할 수 없습니다. 이를 위해 다음 조정은 그래서 같은 width로 <li>의를 추가하는 것입니다 :

nav li { 
    display: inline-block; 
    padding: 3% 2%; 
    width: 50px; /* change this to whatever you want in px or % */ 
}

의 차이는 (다음 후, 첫번째 전에) 다음과 같습니다

before after

이게 문제를 해결합니까? 귀하의 질문에 대한 나의 이해를 정정하거나 알려 주시기 바랍니다. 추가 정보가 필요한 경우.

안부 인사, 마리안.

출처

2014-12-14 22:09:18

화면 크기가 작을 때 nth-child가 표시되지 않습니다.

답변

관련 문제