Jak ułożyć responsywnie ikony w dwa rzędy - sklep internetowy

Question

Cześć,

jestem lakiem w html, ale chciałabym rozwiącać jeden problem na stronie sklepu. Czy ktoś podpowie co zrobić, aby ikonki na widoku z telefonu, układały się w 2 rzedy poziome po 2 ikonki z podpisami, a nie jak teraz wszystkie ciągiem pionowo. Załączam zdjęcia widoku z komputera(tu chciałabym aby tak zostało), widoku z telefonu oraz tego co chciałabym uzyskać na telefonie.

Z góry dzięki za odpowiedź!

Komputer

Telefon

Taki chciałabym widok na fonie

Kod

<div class="f-row">
<div class="f-grid-3" style="text-align: center;">
<p><img src="/userdata/public/assets//flaga-ikona.png" alt="Flaga ikona" width="70" /></p>
<h2><span style="color: #555555; font-size: 10pt;">POLSCY PRODUCENCI</span></h2>
</div>
<div class="f-grid-3" style="text-align: center;">
<p><img src="/userdata/public/assets//lisc-ikona.png" alt="Liść ikona" width="70" /></p>
<h2><span style="color: #555555; font-size: 10pt;">NATURALNE MATERIAŁY</span></h2>
</div>
<div class="f-grid-3" style="text-align: center;">
<p><img src="/userdata/public/assets//pedzel-ikona.png" alt="Pędzel ikona" width="70" /></p>
<h2><span style="color: #555555; font-size: 10pt;">ORYGINALNE WZORY</span></h2>
</div>
<div class="f-grid-3" style="text-align: center;">
<p><img src="/userdata/public/assets//lupa-ikona.png" alt="Lupa ikona" width="70" /></p>
<h2 style="text-align: center;"><span style="font-size: 10pt;"><span style="color: #555555;">DOPRACOWANE </span>W KAŻDYM SZCZEGÓLE</span></h2>
</div>
</div>

 

Answer 1

pokaż css, dokładniej to css klasy f-row i f-grid-3. Spróbuj ustawić szerokość elementów na np. 45% i zobaczy czy się ustawią, jeżeli nie masz w kodzie css wykorzystanego media query to będziesz musiała dodać specjalne znaczniki.

 

https://www.aurainweb.pl/jak-uzywac-media-query-kilka-przydatnych-przykladow-css3/

Comments

Dziękuję za odpowiedź jak napisałam wyżej, jestem totalnym laikiem, dlatego też sklep na SaaSie Shoper, chyba nie za bardzo moge się dostać do CSS. Ale i tak dzięki za odpowiedź, jutro spróbuję to sprawdzić!