Robienie "Responsywności".

pytanie zadane 12 września 2022 w HTML i CSS przez domelcio Użytkownik (960 p.)

Hej, jest ktoś w stanie wytłumaczyć mi jak się robi "Responsywność" bo za bardzo tego nie rozumiem w praktyce. Różne poradniki, strony mile widziane.

Ogołem to próbuje zrobić responsywność na tym przykładzie

HTML:

    <div class="multiple-contener">
        <div>
            <img src="pictureten.png">
        </div>
        <div>
            <img src="pictureeleven.png">
        </div>
        <div>
            <img src="picturetwelve.png">
        </div>
        <div class="multiple-information">
            <div class="sna-kolor">
                <a name="Sprawdź nasze realizacje">Sprawdź nasze realizacje</a>
            </div>
            <div class="strzalki">
                <img src="strzalki.png">
            </div>
        </div>
    </div>

.multiple-contener {
    background-color: #1D2328;
    display: flex;
    padding-top: 15%;
    width: 100%;
    padding-bottom: 15%;
}

.multiple-information {
    padding-top: 10%;
    text-align: center;
}

.strzalki {
    text-align: right;
    padding-right: 15%;
    padding-top: 15%;
}

.sna-kolor {
    color: #FFFFFF;
    font-family: 'Prosto One';
    font-style: normal;
    text-align:justify;
    text-align: right;
    font-weight: 400;
    font-size: 36px;
    padding-left: 50%;
    padding-right: 10%;
}

komentarz 12 września 2022 przez neo1020 Dyskutant (8,430 p.)
edycja 12 września 2022 przez neo1020


.multiple-contener {
    background-color: #1D2328;
    display: flex;
    padding-top: 15%;
    width: 100%;
    padding-bottom: 15%;
}
 
.multiple-information {
    padding-top: 10%;
    text-align: center;
}
 
.strzalki {
    text-align: right;
    padding-right: 15%;
    padding-top: 15%;
}
 
.sna-kolor {
    color: #FFFFFF;
    font-family: 'Prosto One';
    font-style: normal;
    text-align:justify;
    text-align: right;
    font-weight: 400;
    font-size: 36px;
    padding-left: 50%;
    padding-right: 10%;
}

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

.multiple-contener {
    background-color: white;
}
}

Dodajesz np.

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

i pomiędzy nimi wstawiasz to co chcesz aby się zmieniło dla rozdzielczości 900 px max

}

możesz zrobić osobne pliki style.css dla różnych rozdzielczośći i wczytywać