Zdjecia na stronie po zmniejszeniu okna

Question

Witam,

Pisze strone od podstaw i jak zmniejszam okno to mi zdjecia wychodza po prawej stronie.

https://codepen.io/andrzej-hnatiuk/pen/wvrmeNL?editors=1100

W codepen zdjec nie widac ale w VScode widac i wtedy problem jest lepiej widoczny.

Chcialem zeby po zmniejszeniu okna zdjeca ustawialy sie w pozycji poziomej i napis ze zrodlem byl pod nimi.

Jak moge to zrobic?

Answer 1

Użyj flex-wrap

Comments

Dzieki,

A jak zrobic zeby miedzy zdjeciami byl odstep kilka px i zeby zrodlo bylo przyklejone do ostatniego zdjecia.

---

Jeżeli chodzi o odstęp to wystarczy margines dodać do zdjęć, a dodanie źródła to mamy znacznik cite, lub jeżeli podpisujemy zasób to figcaption, lub to i to

<figure>
    <img src="https://via.placeholder.com/220?text=figcaption + city"
         alt="szare tło">
    <figcaption>szare tło z zerwisu via placeholder
      <cite><a href="https://via.placeholder.com/100">Źródło: https://via.placeholder.com/100</a></cite>
    </figcaption>
</figure>

figure {
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 220px;
    margin: auto;
}

figcaption {
    background-color: #222;
    color: #fff;
    padding: 3px;
    text-align: center;
}
cite a{
  display: block;
  color: white;
}

 

Answer 2

Dzieki,

Z tym marginesem to faktycznie pomoglo, natomiast z tym zrodlem to zastosowalem inny sposob.

Pojawil sie kolejny problem. W wersji mobilnej jest biala linia.

 

Najpierw probowalem ustawic 

    section{
        width: 100%;
    }

potem 

@media (max-width:420px){
    section{
        width: 100%;
    }
}

Nie pomoglo.

Link do calego kodu: https://codepen.io/andrzej-hnatiuk/pen/xxXWYjx

W codepen niektore zdjecia sie nie otwieraja ale w VScode juz tak.

Comments

Jest kilka rzeczy do poprawy. Ogólnie jest problem z responsywnością obrazów, modelem pudełkowym elementów, niełamliwością długich wyrazów w  tekście.