Wersja Mobilna a normalna www

Question

Witam mam problem i nie umiem sobie z nim poradzić na stronie www na pc jest wszystko ok ale na wersji mobilnej mam pewien błąd nie jest na środku obiekty szarych kafelek jak temu zaradzić widać na fotce

.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>
 

 

Answer 1

Okey, mam to w divie z ID box_custom36 dorzuć 
 

display: flex;
flex-direction: row;

 

[edit]

Oczywiście zrób tak żeby zasada działa do mobile

 

Comments

.boxyinfo{
  float: left;
  width: 295px;
  height: 160px;
  background-color: #c0c0c0;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-left: auto;
  margin-right:auto;
  @media screen and (min-width: 320px) and (max-width: 950px){
 display: flex;
 flex-direction: column;}
}

Nadal to samo

---

kod nie ma iść do .boxyinfo :) tylko do tzw wrapa div wyżej

Chyba, że chodzi o coś innego. Jeśli o to to utwórz nową klasę wstaw ją do diva który jest oznaczony <div id="box_custom36"> i wstaw kod który jest wyżej, zamieściłeś go w złym miejscu :) 

Answer 2

Dla pojemnika należy ustawić

  display: flex;
  flex-wrap:  wrap;
  justify-content:  center | space-between | space-around | space-evenly;

 float: left dla .boxyinfo  nie potrzebny skoro używasz flexbox

Comments

nic to nie daje a jeżeli skasuje float:left to mam z automatu kolumny nie obok siebię a jedna pod drugą w wersji na pulpicie

---

Ale rozumiem, że wybrałeś jedną z opcji ( center | space-between | space-around | space-evenly ) jaką daje justify-content ?

---

.boxyinfo{
  float: left;
  width: 295px;
  height: 160px;
  background-color: #c0c0c0;
  display: flex;
  flex-wrap:  wrap;
  text-align: center;
  margin-left: auto;
  margin-right:auto;
justify-content: space-around;
}

nadal nic

---

Napisałem, ze należy ustawić te wartości dla pojemnika.

Uwagi:

1. Nie wstawia się styli inline (wewnątrz tagów html).

2. Nie wolno używać takiego samego id do więcej niż jednego elementu ( id="fotografia" ).

3. Nie używa się <br> do łamania linii ( od tego jest css);

4. Po co zamykasz cały boxyinfo  w tagu <p></p>

<dic class="container">
<div class="boxyinfo">
<a href="/pl/i/Zwroty-i-reklamacje/15"><img src="https://png.icons8.com/dusk/50/000000/planner.png" alt="">14 DNI NA ZWROT</a>Zamwione produkty moesz zwrci do 14 dni od daty zakupu
</div>
<div class="boxyinfo">
<a href="/pl/i/Formy-platnosci/10"><img src="https://png.icons8.com/dusk/50/000000/shield.png" alt="">BEZPIECZNE ZAKUPY</a>Bezpieczne zakupy dziki patnociom Shoper
</div>
<div class="boxyinfo">
<a href="/Czas-i-koszty-dostawy"><img src="https://png.icons8.com/dusk/50/000000/delivery.png" alt="">SZYBKA WYSYKA</a>Zamwienia realizujemy na bieco nawet w 24h!
</div>
<div class="boxyinfo">
<a href="/Czas-i-koszty-dostawy"><img src="https://png.icons8.com/dusk/50/000000/money-box.png" alt="">DARMOWA DOSTAWA</a>Przy zamwieniu od 300z!
</div>
</div>

.container{
display: flex;
flex-wrap:  wrap;
justify-content:  center;
}
.boxyinfo{
width: 290px;
background-color: #c0c0c0;
display: flex;
flex-direction: column;
text-align: center;
margin: 5px;
padding: 15px 10px;
font-size: 18px;
}
.boxyinfo img{
  display: block;
  margin: 0 auto;
  width: 80px;
}
.boxyinfo a{
  display: block;
  color: #000;
  text-decoration: none;
}