2016-09-19 2 views
1

제 이름은 Jeffrey이고 웹 사이트를 만들기 시작했습니다. 이제는 내가 아주 새롭기 때문에 HTML/CSS 지식이 거의 없지만 미디어 쿼리와 관련하여 거의 지식이 없으며 누군가 나 자신을 고칠 수없는 것처럼 나를 도울 수 있기를 바라고 있습니다.미디어 쿼리 디스플레이 : 없음

로고와 텍스트 메뉴가있는 div가 있습니다. 이 모바일 웹 사이트를 구축하려고 할 때 로고를 삭제하고 메뉴 만 표시하고 싶습니다. 나는 누군가가 나를 도울 수있는 희망 ...

body{margin:0;font-family:'Titillium Web';} 
 
a:hover{color:#60a642;} 
 
a{color:#000;text-decoration:none;} \t 
 
@media screen and (max-width:1155px) { 
 
\t #containerlogomenu {width:60% !important;} 
 
    #logo {padding:0px; margin-left:auto; 
 
\t margin-right:auto;} 
 
} 
 
@media screen and (max-width:761px) { 
 
\t #containerlogomenu {width:100%; padding:0px;} 
 
    #logo {display:none;padding:0px; margin-left:auto; 
 
\t margin-right:auto;} 
 
\t #menu {width:100%;} 
 
} 
 

 
\t 
 
#top{ 
 
\t width:100%; 
 
\t height:140px; 
 
\t background-color:#f2f2f2;} 
 

 
\t #containerlogomenu{ 
 
\t \t padding:20px; 
 
\t \t width:40%;} 
 
\t \t 
 
\t #logo{ 
 
\t \t float:left; 
 
\t \t padding-left:50px; 
 
\t \t padding-right:50px; 
 
\t \t width:60px; 
 
\t \t height:100px; 
 
\t \t background-color:#F00; 
 
\t \t background-repeat:no-repeat;} 
 
\t \t 
 
\t #menu{ 
 
\t \t font-weight:600; 
 
\t \t font-size:19px; 
 
\t \t text-align:left; 
 
\t \t line-height:110px; 
 
\t \t width:65%; 
 
\t \t float:right; 
 
\t \t color:#000;}
<div id="top" align="center"> 
 
\t <div id="containerlogomenu" align="center"> 
 
\t 
 
    \t <div id="logo"></div> 
 
     
 
\t  <div id="menu"> 
 
     \t <a href="#">HOME</a> | 
 
      <a href="#step1">STEP 1</a> | 
 
      <a href="#step2">STEP 2</a> | 
 
      \t <a href="#step3">STEP 3</a></div> 
 
      
 
    </div> 
 
</div>

문제는 메뉴가 중심되지 것입니다 것을 내 용기가 너무 작 유지! 어쨌든 당신의 시간과 노력에 미리 감사드립니다!

+0

만 호 아래의이

JsFiddle 예를Here

발췌문 예를보십시오 나 링크 없음 또는 모든 링크 없음 모바일보기 ??? –

답변

4

다른 모든 CSS 규칙보다 아래에 미디어 쿼리를 넣어야합니다. 그렇지 않으면 정규 규칙에 의해 무시됩니다.

+0

그래서 간단합니다 ... 아직 찾을 수있는 단서가 없었습니다 ... 정말 고마워요! – Jeffrey

0

body{margin:0;font-family:'Titillium Web';} 
 
a:hover{color:#60a642;} 
 
a{color:#000;text-decoration:none;} \t 
 
@media screen and (max-width:1155px) { 
 
#containerlogomenu {width:60% !important;} 
 
#logo {padding:0px; margin-left:auto; 
 
margin-right:auto;} 
 
} 
 
@media screen and (max-width:761px) { 
 
#containerlogomenu {width:100% !important; padding:0px;} 
 
#logo {display:none;padding:0px; margin-left:auto; 
 
margin-right:auto;} 
 
#menu {width:100%} 
 
    .HomeLink 
 
    { 
 
display:none; 
 
    } 
 
} 
 

 

 
#top{ 
 
width:100%; 
 
height:140px; 
 
background-color:#f2f2f2;} 
 

 
#containerlogomenu{ 
 
\t padding:20px; 
 
\t width:40%;} 
 
\t 
 
#logo{ 
 
\t float:left; 
 
\t padding-left:50px; 
 
\t padding-right:50px; 
 
\t width:60px; 
 
\t height:100px; 
 
\t background-color:#F00; 
 
\t background-repeat:no-repeat;} 
 
\t 
 
#menu{ 
 
\t font-weight:600; 
 
\t font-size:19px;  \t \t 
 
\t line-height:110px; 
 
\t width:100%; 
 
\t margin:0 auto; 
 
\t color:#000;}
<div id="top" align="center"> 
 
\t <div id="containerlogomenu" align="center"> 
 
\t 
 
    \t <div id="logo"></div> 
 
     
 
\t  <div id="menu"> 
 
     \t <a href="#" class="HomeLink">HOME</a> | 
 
      <a href="#step1">STEP 1</a> | 
 
      <a href="#step2">STEP 2</a> | 
 
      \t <a href="#step3">STEP 3</a></div> 
 
      
 
    </div> 
 
</div>

관련 문제