html-css-responsividade-publicacao-projeto - 07 Lista de exercícios

1.Ajustando o layout para telas menores

.apresentacao {
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px; 
}

2.Implementando media queries para mudança de layout

@media (max-width: 1023px) {
    .apresentacao {
        flex-direction: column;
        text-align: center; 
    }
}

3.Refinando o layout responsivo

@media (max-width: 1200px) {
    .apresentacao {
        flex-direction: column-reverse; 
        gap: 20px; 
    }
}

4.Ajustando o cabeçalho para telas menores

@media (max-width: 768px) {
    .cabecalho {
        padding: 20px 10%; 
    }
}

5.Centralizando itens do menu em telas menores

@media (max-width: 768px) {
    .cabecalho__menu {
        flex-direction: column;
        justify-content: center; 
        align-items: center;
    }
}

6.Refinando o design responsivo do cabeçalho

@media (max-width: 768px) {
    .cabecalho {
        padding: 25px 5%; 
    }

    .cabecalho__menu {
        flex-direction: column;
        justify-content: center; 
        align-items: center;     
        gap: 16px;            
    }

    .cabecalho__menu__link {
        padding: 10px 20px; 
        font-size: 1rem;
    }
}

Resultado