菜單內容不適合移動模式

「菜單」位於頁面頁腳中。有圖片，精靈和文字。當我調整並打開網站或通過電話時，菜單不適合。我試圖添加一些中等查詢，但沒有成功。菜單內容不適合移動模式

我想在這樣的移動和或調整畫面，根據視口的尺寸的圖像，文字和精靈契合。

如果可能的話，調整大小屏幕以小的寬度，打開瀏覽器控制檯或相同的小區。

CSS：

html, body{ 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 

} 

ul, li{ 
    margin: 0; 
    padding: 0; 
} 



h2{ 
    font-family: 'Open Sans Condensed', sans-serif !important; 
    color: black !important; 
    font-size: 30px !important; 
    line-height: 15px !important; 
} 


#principal { 
    width: 100%; 
    height: 100%; 
    background-image: url('../images/background.jpg'); 
    position: absolute; 
    background-repeat: no-repeat;  
    background-position: center center; 
    background-size: cover; 
} 


#faixa{  
    position: absolute; 
    width: 100%;   
    background-image: url('../images/faixa2.png'); 
    background-repeat: no-repeat; 
    bottom: 0; 
} 



#img-logo{ 

    margin-left: 35%; 
    display: inline-block; 
    text-align: center; 
} 


#contato{ 
    position: absolute; 
    margin-left: 20px; 
    display: inline-block; 
    height:auto; 
    text-align: center; 
} 



@media(max-width:1050px){ 
    #img-logo{ 
    margin-left: 20%; 
    } 
} 

@media(max-width:760px){ 
    #img-logo{ 
    margin-left: 10%; 
    } 
} 

@media(max-width:635px){ 
    #img-logo{ 
    margin-left: 5%; 
    } 
} 


@media(max-width:580px){ 
    #img-logo{ 
    margin-left: 0; 
    } 
} 
@media(max-width:551px){ 

/* #logo{ 
    width: 20%; 
    }*/ 
/* } 
    #img-logo{ 
    width: 50%; 
    height: 25%; 
}*/ 
}

HTML：

<div id="principal"> 
    <div id="faixa"> 

     <img src="images/logo4.png" id="img-logo" class="img-responsive"> 

       <div id="contato"> 

       <ul> 
         <li><a href="" target="_blank" class="img_sprite1"></a></li> 
          <li><a href="" target="_blank" class="img_sprite2"></a></li> 
          <li><a href="" target="_blank" class="img_sprite3"></a></li> 
       </ul> 

       <h2> (44) 4444-4444 <br><br> <span style="font-size: 18px"> Av. blablabal, 2323 - fer ie jeo <br> cidade - país</span> </h2> 
      </div> 
     </div> 
    </div>

我有兩個div。主要的，背景圖像和div組，這顯然是一個黃色的條紋。在這個div組中，我添加了標識，直接通過標籤img和帶有精靈和文本的div。我已經嘗試了很多方法來修改媒體，但根據我的理解，圖像的範圍僅在您有內容時纔會顯示。她一個人不顯示。所以當我們減小圖像尺寸時，軌道尺寸也會自動修改。我試圖在背景中插入一個帶有徽標的div，也很快離開，sprite和獨立文本div組並沒有任何東西。我試圖修改在許多不同的方式來處理內容的大小，但沒有成功/：

來源

2016-01-13 Zkk

嘗試在@media的查詢放（最大寬度：760px）不同種類的尺寸爲兩個格（徽標和contato），在這個尺寸下，你可以給圖像一個波長的尺寸。

試圖給刪除手機上的一些信息（因此它可以更好地適應），並更改字體大小。

來源

2016-01-13 16:42:49

菜單內容不適合移動模式

回答

相關問題