2016-09-19 3 views
1

私の名前はJeffreyであり、Webサイトを作成し始めました。私は非常に新しいので、私はほとんど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

のみ浩以下Here

スニペット例この

JsFiddle例を試してみてください私のリンクなしまたはすべてのリンクなしモバイルビューで??? –

答えて

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>

関連する問題