Mediaqueries- pierwsze starcie

Witam,
Przygotowałem stronę i media queries niestety desktop first.
O ile w układzie landscape wszsytko jest pod kontrolą to w portrait wszsytko się rozjeżdża.
Czy najlepiej będzie rozwiązać ten problem przez dodanie tych samych brake pointów tylko dodać warunek (orientation: portrait)?

Mateusz T napisał(a):

Czy najlepiej będzie rozwiązać ten problem przez dodanie tych samych brake pointów tylko dodać warunek (orientation: portrait)?

Ciężko wywnioskować to z pustych media query, musiałbyś wrzucić jakiś przykład do oceny żeby można było sprawdzić.

Jakbym miał coś doradzić to proponowałbym zaczynać od wersji mobilnej, zwłaszcza na samym początku jak zaczynamy poznawać css i dopiero później rozszerzać widok o elementy przeznaczone na większe ekrany. Czyli zamiast korzystać cały czas z max-width to używamy głownie min-width.

Druga rzecz to dobranie odpowiednich breakpointów do media query. Najlepiej wybrać kilka głównych wartosci, których będziemy używać do stylizacji w całej aplikacji i trzymanie się tego przez cały czas. Przykładowo Bootstrap z tego co kojarzę to ma takie breakpointy 576px, 768px, 992px, 1200px, 1400px.

Chciałbym dokończyć już ten projekt w desktop first, kolejne będę robił w mobile first.

Kod wygląda jak poniżej. Największy problem mam z .content, h3 i .logo

/* & MEDIA QUERIES */

@media (max-width: 1081px) {

    html {
        font-size: 55%;
    }

    .header {
        padding: 1.5rem 2rem;
    }

    section {
        padding: 2rem;
    }

    .home .content {
        max-width: 50rem;
        text-align: center;
        position: absolute;
        bottom: 10rem;
        right: 5rem;
    }

    .home .content h3 {
        font-size: 4.5rem;
        text-transform: uppercase;
        color: #fff;
        font-weight: 900;
    }
    
}

@media (max-width:768px){

    #menu-btn{
        display: inline-block;
    }

    .header .navbar {
        position: absolute;
        top: 100%;
        right: -100%;
        background: #fff;
        width: 30rem;
        height: calc(100vh - 9.5rem);
    }

    .header .navbar.active{
        right:0;
    }

    .header .navbar a {
        color: var(--black);
        display: block;
        margin: 1.5rem;
        padding: .5rem;
        font-size: 2rem;
    }

    .home {
        background: url(/images/home-img3.jpg) no-repeat;
        background-position: right;
        justify-content: center;
        text-align: center;
        align-items: center;
        background-size: cover;
    }

    .home .content {
        max-width: 50rem;
        text-align: center;
        position: absolute;
        top: 20rem;
        right: 5rem;
    }

    .home .content h3 {
        font-size: 4.5rem;
        top: 15rem;
    }

    .home .content p {
        font-size: 1.5rem;
    }
}

@media (max-width: 450px){

    html {
        font-size: 50%;
    }

    .home .content {
        max-width: 50rem;
        text-align: center;
        position: absolute;
        top: 20rem;
        right: 5rem;
    }

    .home .content .logo {
        top: 20rem;
        
    }

}

HTML

/* & HOME SECTION */

.home {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: url(/images/home-img2.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.home .content {
    max-width: 60rem;
    text-align: center;
    position: absolute;
    bottom: 10rem;
    right: 10rem;
}

.home .content img {
    position: relative;
    top: 0;
    left: 0;
    height: 40rem;
}

.home .content h3 {
    font-size: 5rem;
    padding-bottom: 5rem;
    text-transform: uppercase;
    color: #fff;
    font-weight: 900;
}

.home .share{
    padding:1rem 0;
    display: flex;
    text-align: center;
    position: absolute;
    bottom: 5rem;
    left: 5rem;
}

.home .share a{

    height: 8rem;
    width: 8rem;
    line-height: 8rem;
    font-size: 5rem;
    color: #fff;
    border: solid;
    margin:.3rem;
    border-radius: 50%;
}

.home .share a:hover{
    background-color: var(--main-color);
}

Powinieneś najpierw powydzielać te style, które się powtarzają we wszystkich breakpointach do jednego selektora, żeby było jak najmniej powtórzeń.

.home .content {
    max-width: 60rem;
    text-align: center;
    position: absolute;
    bottom: 10rem;
    right: 10rem;
}

@media (max-width: 1081px) {
  .home .content {
    max-width: 50rem;
    right: 5rem;

    /* position, bottom, text-align jest taki sam, więc go nie piszemy */
  }
}

@media (max-width: 768px) {
  .home .content {
    top: 20rem;

    /* tutaj z tego co widzę zmienia się jedynie TOP, więc reszty nie musimy powtarzać */
  }
}

@media (max-width: 450px) {
  /* tutaj .home .content nie jest już potrzebne */
}

Przykładowo jeśli strona wyświetla się w przeglądarce o szerokości 550px to na element .home .content działają 3 selektory, pierwszy bez media query i dwa z media query (1081px i 768px), więc nie musimy ponownie powtarzać tych samych styli jeśli nic się nie zmieniło.

Taka zmiana powinna Ci ułatwić pracę nad stroną.