Por Favor ajudem - esta dúvida está me matanto! Zoom out da página.

Richard compartilhe seu código conosco pra podermos ajudar melhor

Você pode acessar o meu código do mesmo portfólio com o media query incluso para poder dar uma estudada. https://github.com/onedreamcwb/portfolio

Irei compartilhar o styles do meu projeto

CSS

    /* Define a media query para quando a largura da tela for no máximo 1200px */
@media (max-width: 1200px) {

    /* Altera o padding do cabeçalho para 10% */
    .cabecalho {
         padding: 10%;
    }

    /* Centraliza os itens do menu no cabeçalho e define a largura para automático */
    .cabecalho__menu {
        justify-content: center;
        width: auto;
    }

    /* Inverte a direção do fluxo dos itens na seção de apresentação e define o padding para 5% e o alinhamento vertical para centralizado */
    .apresentacao {
        flex-direction: column-reverse;
        padding: 5%;
        justify-content: center;
    }

    /* Define a largura dos itens na seção de apresentação para automático, centraliza o conteúdo e o texto, deixando-o centralizado */
    .apresentacao__conteudo {
        width: auto;
        justify-content: center;
        text-align: center;
    }

    /* Define a largura da imagem na seção de apresentação para 50%, centraliza horizontalmente e aplica a animação "alternate" */
    .apresentacao__imagem {
        width: 50%;
        margin: 0 auto;
        animation: alternate;
    }
}

Espero ter ajudado deixei comentado o código explicando o que cada coisa faz

Se ainda houver dúvidas sobre media querys Acesse: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Oi Gustavo, obrigado pelo retorno.

Segue o código:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root {
    --cor-primaria: #000000;
    --cor-secundaria: #F6F6F6;
    --cor-terciaria: #39B5E0;
    --cor-hover: #272727;

    --fonte-primaria: 'Krona One', sans-serif;
    --fonte-secundaria: 'Montserrat', sans-serif;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    display: flex;
    flex-direction: column;
    position: absolute;
    overflow-x: hidden;
}

main {
    min-height: 100vh;
    flex-grow: 1;
    min-width: 100vh;
    align-items: stretch;
}

.cabecalho{
    padding: 2% 0% 0% 15%;
    min-width: 100vw;
}
.cabecalho__menu{
    display: flex;
    gap: 80px;
}
.cabecalho__menu__link{
    font-family: var(--fonte-secundaria);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cor-terciaria);
    text-decoration: none;
}
.apresentacao{
    padding: 10% 15% 5% 15%;
    display: flex;
    align-items:flex-start;
    justify-content: space-evenly;
    gap: 4em;
}
.apresentacao__conteudo{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo{
    font-size: 2.25rem;
    font-family: var(--fonte-primaria);
}
.titulo-destaque{
    color: var(--cor-terciaria);
}
.apresentacao__conteudo__texto{
    font-size: 1.5rem;
    font-family: var(--fonte-secundaria);
}

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}
.apresentacao__links__subtitulo{
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 1.5rem;
}
.apresentacao__links__navegacao{
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid var(--cor-terciaria);
    width: 50%;
    text-align: center;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--cor-secundaria);
    font-family: var(--fonte-secundaria);
}
.apresentacao__links__navegacao:hover{
    background-color: var(--cor-hover);
    transform: scale(1.1);
}
.apresentacao__imagem{
    display: block;
    max-width: 40%;
    max-height: auto;
    width: auto;
    height: auto;
    border-radius: 1rem;
    filter: grayscale(100%);
}

.apresentacao__imagem:hover {
    filter: none;
    transition: 1s;
}


.rodape{
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    padding: 1rem;
    text-align: center;
    justify-content: center;
    font-family: var(--fonte-secundaria);
    font-size: 1.5rem;
    font-weight: 400;  
    min-width: 100vw;
}

@media (max-width: 1000px) {

    .cabecalho {
        padding: 10% 10% 5% 10%;
    }

    .cabecalho__menu {
        justify-content: center;
    }

    .apresentacao__imagem {
        max-width: 50%;
    }

    .apresentacao {
        flex-direction: column;
        align-items: center;
        flex-direction: column-reverse;
    }

    .apresentacao__conteudo {
        width: auto;
    }

    .apresentacao__links__subtitulo{
        font-weight: 400;
        font-size: 2rem;    
    } 

}

Quero muito mesmo saber como fazer isso nas minhas páginas, será que um dos instrutores pode ajudar?

Como ficam suas páginas quando você dá zoom no browser?

Caso a dúvida já tenha sido sanada peço que marque como concluída, ou se já encontrou o erro por conta própria

Olá, não, ainda estou pesquisando.

Quer entrar em call no Discord? sempre estou online e você pode stremar sua tela pra trabalharmos nisto

Estou na sala de estudos Front end do Servidor

Caso não esteja no servidor E logo depois clique em discord que será gerado um link de convite

Obrigado mas quero tentar resolver um pouco mais.

Vi sites assim, mas outros que também não são.

Vou partir para o curso Mobile 1st e tentar retrabalhar a página.

Se não conseguir vou aceitar.

Tudo bem Entretanto, é importante lembrar que lá na frente fazer parte de uma equipe de programação envolve trabalho em equipe e colaboração. A habilidade de pedir ajuda e de colaborar é tão importante quanto a habilidade de escrever código. Portanto, não há nada de errado em pedir ajuda a um colega ou aceitar ajuda quando for oferecida.

Além disso, a colaboração pode ser uma oportunidade de aprendizado, pois pode permitir que a pessoa veja como outros programadores abordam problemas e aprenda com suas técnicas e métodos.

Bom trabalho

Obrigado!

Você tem razão.

Amanhã a tarde vou entrar no Discord e falar com você se puder, para tentar resolver isso.

Também estou quase sempre online.