Responsive zweizeiligen Menü

Question

Ich versuche, die Codierung für diese Kategorie-Menü zu erstellen: https://menu.thewhitebtq.com/collections/canapes

[! [Image description hier] eingeben [1]] [1]

Es reagiert. Im mobilen Bereich wird es zu einer vertikalen 1-Linie. Ich muss den HTML und CSS dafür kennen.

Dies ist mein aktueller HTML-Code:

  
<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

hinzufügen @media Abfrage Ihrer Bilder auf mobiles und Desktop-Fenster anzupassen.

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>

(im obigen Beispiel, wenn Sie Klick auf Schnipsel erweitern Sie den Blick auf dem Desktop-Ansicht und auf diesem Schnipsel sehen Sie den mobilen Fenstereffekt sehen).