Div Style Pomocy Mobilna / Komputerowa

Question

Witam wszystkich mam nadzieję że ktoś mi pomoże jestem amatorem jeszcze kodu i potrzebuje pomocy mam na stronie taki o to kod 

<div style="float: left; width: 295px; height: 160px; background-color: #c0c0c0;">
<p style="text-align: center;"><span style="font-size: x-large;"><a href="/pl/i/Zwroty-i-reklamacje/15"><img id="fotografia" src="/public/assets//icons8-synchronizowa%C4%87-50.png" alt="" width="50" height="50" /><br /><br />14 DNI NA ZWROT</a></span> <br /><br /> <span style="font-size: medium; font-family: Arial;">Zamówione produkty możesz zwrócić do 14 dni od daty zakupu </span></p>
</div>
<div style="float: left; width: 295px; height: 160px; background-color: #c0c0c0; text-align: center;">
<p><span style="font-size: x-large;"><a href="/Czas-i-koszty-dostawy"><img id="fotografia" src="/public/assets//icons8-ci%C4%99%C5%BCar%C3%B3wka-50.png" alt="" width="50" height="50" /><br /><br />DARMOWA DOSTAWA</a></span> <br /><br /> <span style="font-size: medium; font-family: Arial;">Przy zamówieniu od 300zł!</span></p>
</div>
<div style="float: left; width: 295px; height: 160px; background-color: #c0c0c0; text-align: center;">
<p><span style="font-size: x-large;"><a href="/Czas-i-koszty-dostawy"><img id="fotografia" src="/public/assets//icons8-czas-50.png" alt="" width="50" height="50" /><br /><br />SZYBKA WYSYŁKA</a></span> <br /><br /> <span style="font-size: medium; font-family: Arial;">Zamówienia realizujemy na bieżąco nawet w 24h!</span></p>
</div>
<div style="float: left; width: 295px; height: 160px; background-color: #c0c0c0;">
<p style="text-align: center;"><span style="font-size: x-large;"><a href="/pl/i/Formy-platnosci/10"><img id="fotografia" src="/public/assets//icons8-k%C5%82%C3%B3dka-50.png" alt="" width="50" height="50" /><br /><br />BEZPIECZNE ZAKUPY</a></span> <br /><br /> <span style="font-size: medium; font-family: Arial;">Bezpieczne zakupy dzięki płatnościom Shoper</span></p>
</div>

I wszystko ok ale na stronie mobilnej gdy te boxy wyświetlają się jeden pod drugim to cała kolumna nie jest na środku strony . z lewej mam z 20 px białego a z prawej 5px jak przesunąć całośc tak żeby była na środku?:( 

widać to na www.bartello.pl 

Answer 1

Po pierwsze to należałoby zmienić z <div style="... na class="... i edytować wszystko w pliku css gdzie mógłbyś od razu dać media queries lub użyć np flexa.

Answer 2

Proponuje użyć flexa - tutaj masz (moim zdaniem) najlepszy poradnik:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Żeby rozwiązać Twój problem należy dla klasy innerbox, która jest kontenerem dla Twoich 'kafelków', dodać następujące style:

display: flex;
flex-direction: column;

I już na mobilce Twoje 'kafelki' będą wycentrowane.

Daj znać czy sobie poradziłeś.

Pozdrawiam

Comments

zmieniłem wszystko na div tyle ale dalej mam ten sam problem jak widać na obrazku jest wiekszy odstęp z lewej niż z prawej nie rozumiem czemu i gdzie mam błąd....; /

.boxyinfo{
  float: left;
  width: 290px;
  height: 160px;
  background-color: #c0c0c0;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-left: 5px;
}

<div class="boxyinfo">
<p style="text-align: center;"><span style="font-size: x-large;"><a href="/pl/i/Zwroty-i-reklamacje/15"><img id="fotografia" src="/public/assets//icons8-synchronizowa%C4%87-50.png" alt="" width="50" height="50" /><br /><br />14 DNI NA ZWROT</a></span><br /><br /> <span style="font-size: medium; font-family: Arial;">Zamówione produkty możesz zwrócić </span><span style="font-size: medium; font-family: Arial;">do 14 dni od daty zakupu </span></p>
</div>
<div class="boxyinfo">
<p style="text-align: center;"><span style="font-size: x-large;"><a href="/pl/i/Formy-platnosci/10"><img id="fotografia" src="/public/assets//icons8-k%C5%82%C3%B3dka-50.png" alt="" width="50" height="50" /><br /><br />BEZPIECZNE ZAKUPY</a></span> <br /><br /> <span style="font-size: medium; font-family: Arial;">Bezpieczne zakupy dzięki płatnościom Shoper</span></p>
</div>
<div class="boxyinfo">
<p style="text-align: center;"><span style="font-size: x-large;"><a href="/Czas-i-koszty-dostawy"><img id="fotografia" src="/public/assets//icons8-czas-50.png" alt="" width="50" height="50" /><br /><br />SZYBKA WYSYŁKA</a></span> <br /><br /> <span style="font-size: medium; font-family: Arial;">Zamówienia realizujemy na bieżąco nawet w 24h!</span></p>
</div>
<div class="boxyinfo">
<p style="text-align: center;"><span style="font-size: x-large;"><a href="/Czas-i-koszty-dostawy"><img id="fotografia" src="/public/assets//icons8-ci%C4%99%C5%BCar%C3%B3wka-50.png" alt="" width="50" height="50" /><br /><br />DARMOWA DOSTAWA</a></span> <br /><br /> <span style="font-size: medium; font-family: Arial;">Przy zamówieniu od 300zł! </span></p>
</div>