html-css-responsividade-publicacao-projetos - 06 Lista de exercícios

1.Adaptando imagens para diferentes tamanhos de tela
html:
<img class="apresentacao__imagem" src="./assets/Imagem.png" alt="Foto da Joana Santos programando">

css:

.apresentacao__imagem {
    width: 50%;
}

2.Ajustando o layout para diferentes dispositivos
css:

@media (max-width: 768px) {
    .apresentacao {
        flex-direction: column-reverse;
        margin: 5%;
        text-align: center;
    }

    .apresentacao__conteudo {
        width: 100%; /* Ajustado para ocupar 100% no mobile */
    }

    img {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }

    .cabecalho__menu {
        flex-direction: column;
        text-align: center;
    }

    .sobre-cards {
        flex-direction: column;
        gap: 20px;
    }
}

3.Responsividade do conteúdo de texto
css:

.apresentacao__conteudo {
    width: 50%; /* desktop */
    max-width: 615px;
}

@media (max-width: 768px) {
    .apresentacao__conteudo {
        width: 100%; /* mobile */
    }
}

4.Melhorando a responsividade dos links de navegação
css:

.apresentacao__links__navegacao {
    width: 50%; /* desktop */
    max-width: 378px;
}

media query:

.apresentacao__links__navegacao {
    width: 100%; /* mobile */
}

Resultado