応答2行のメニュー

Question

私は、このカテゴリのメニューのためのコードを再作成しようとしています：[！[ここに画像の説明を入力] [1]] https://menu.thewhitebtq.com/collections/canapes

[1]

それは応答性です。携帯電話の場合、垂直1行に変わります。私はhtmlとcssを知る必要があります。

これが私の現在のHTMLコードです：

  
<div id="navigation"> 
<ul> 
    <li><a href="http://goalexpo.com/canapes/">CANAPÉS</a></li> 
    <li><a href="http://goalexpo.com/sandwicheswraps/">SANDWICHES &amp; WRAPS</a></li> 
    <li><a href="http://goalexpo.com/fingerfood/">FINGER FOOD</a></li> 
    <li><a href="http://goalexpo.com/mini-food-cups/">MINI CUPS</a></li> 
</ul> 
</div> 
<!-- navigation --> 
<div id="navigation"> 
<ul> 
    <li><a href="http://goalexpo.com/mini-salads/">MINI SALADS</a></li> 
    <li><a href="http://goalexpo.com/desserts/">DESSERTS</a></li> 
    <li><a href="http://goalexpo.com/cakes-towers/">CAKES &amp; TOWERS</a></li> 
    <li><a href="http://goenter code herealexpo.com/hot-cold-beverages/">HOT &amp; COLD BEVERAGES</a></li> 
</ul> 
</div> 
<!-- navigation --> 

Answer 1

は、モバイルとデスクトップのウィンドウの上にあなたのイメージを調整する @mediaクエリを追加します。 （上記の例では、あなたがモバイル画面効果を見ることができますデスクトップ表示にし、このスニペットのビューを見ることができるスニペットを展開する上で、あなたをクリックした場合）

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    } 
 
img{ 
 
    width:30%; 
 
    height:20%; 
 
    } 
 
@media screen and (max-width:768px){ 
 
    img{ 
 
    width:80%; 
 
    height:20%; 
 
    } 
 
}

<div> 
 
    <img src="https://i.stack.imgur.com/iZCHl.jpg"> 
 
    <img src="https://i.stack.imgur.com/ufSnP.jpg"> 
 
    <img src="https://i.stack.imgur.com/TgKyr.jpg"> 
 
</div>

。