Responsywny rozstaw ikon

pytanie zadane 19 października 2019 w HTML i CSS przez zbignieFF Nowicjusz (140 p.)

Witam.

Na wstępie pewnie standardowy tekst:

"Z góry przepraszam, że może temat jest odgrzewany ale niestety nic nie znalazłem co by mnie naprowadziło na rozwiązanie"

Piszę właśnie własną stronę internetową.

Pośród różnych treści chcę aby w jednej linii umieszczone były trzy zdjęcia obok siebie i wyśrodkowane względem diva.

------------------------------------------------------------------------------

Zapis html:

<div class="ikony">
    
    <div class="qb1">
        <div class="ikonka1"><img src="1.png">opis1</div>
        </div>
    <div class="qb2">
        <div class="ikonka2"><img src="2.png">opis2</div>
        </div>
    <div class="qb3">
        <div class="ikonka3"><img src="3.png">opis3</div>
        </div>  
    
    <div style="clear: both"></div>


</div>

-------------------------------------------------------------------------------------

CSS

.ikony
{
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1.2em;
    color: white;
    line-height: 40px;  
}

.qb1
{
    max-width: 230px;
    display: inline-block;
    float: left;
    
}
.qb2
{
    max-width: 230px;
    display: inline-block;
}
.qb3
{
    max-width: 230px;
    display: inline-block;
    float: right;
}

----------------------------------------------------

Oczywiście nie twierdzę, że powyższy kod jest w 100% prawidłowy.

Problem polega jednak w momencie, kiedy chcę zmniejszyć stronę do rozdzielczości telefonu bo zaczyna ona przesuwać lub ucinać zdjęcia

Chciałbym, aby w momencie zejścia do szerokości 480px, zdjęcia automatycznie ułożyły się pionowo i wyśrodkowały względem nowej, mniejszej rozdzielczości.

Wiem, że jest możliwość poniższa:

@media only screen and (max-width: 480px)
{

}

Tylko nie wiem jak miałbym to zapisać. Próbowałem różnych zapisów ale bez skutku.

Może i zostanę zmieszany z błotem ale skupiam się na razie na obsłudze samego html i css.

JQuery, bootstrapy itp są nadal dla mnie czarną magią i prosiłbym o wsparcie w zakresie html/css.

Z góry dzięki!

1 odpowiedź

odpowiedź 19 października 2019 przez DawidK Nałogowiec (37,910 p.)

Coś takiego powinno zadziałać i zrealizować to co chcesz:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Ikony</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
    <div class="grid"> 
        <img class="img" src="coffe1.jpg">
        <img class="img" src="coffe2.jpg">
        <img class="img" src="coffe3.jpg"> 
    </div>
</body>
</html>

main.css

.img {
    height: 240px;
    width: 320px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
}

@media only screen and (max-width: 990px) {

    .grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 1em;
    }
}

Tworzysz klasę grid z atrybutami:

display: grid (oznacza, że elementy wewnątrz są blokowe)

grid-template-columns: repeat(3, 1fr); (tworzysz siatkę z 3 kolumn gdzie każda ma 100% szerokości oznaczone jest to jako 1fr)

justify-items: center; (oznacza, że elementy wewnątrz siatki będą wyśrodkowane względem kolumny)

Póżniej ustawiasz regułę media że dla ekranów i rozdzielczości mniejszej od np 990px siatka ma się zmienić na taką z jedną kolumną na całą szerokość

grid-template-columns: repeat(1, 1fr); podobnie jak powyżej 1fr oznacza 100% szerokości, możesz też dodać odctęp za pomocą gap

Wynik powinien być mniej więcej taki: