Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

COMO FAÇO PARA AJUSTAR ISSO

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Responsividade e GitHub e atividade Conteúdo responsivo

por Nathaly Isabely Dos Santos Silva
| 37.1k xp | 25 posts

Como faço para tirar esses espaços entre a parte de cima e de baixo da imagem?

meu código css abaixo:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root { --cor-principal:white; --cor-secundaria:black; --cor-terciaria:#DE2CB1; --cor-hover:#272727; 

--fonte-primaria:"Montserrat", sans-serif;
--fonte-secundaria: "Krona One", sans-serif;

}

*{ margin: 0; padding: 0; }

body { /* height: 100vh; */ box-sizing: border-box; background-color: var(--cor-principal); color: var(--cor-secundaria); }

.cabecalho{ padding: 2% 0% 0% 15%; }

.cabecalho_menu{ display: flex; gap: 80px; }

.cabecalho_menu_link{ color:var(--cor-terciaria); font-size: 24px; font-family: var(--fonte-primaria); font-weight: 600; text-decoration: none; }

.cabecalho_menu_link:hover{ color: var(--cor-secundaria); }

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

.apresentacao_conteudo{ width: 60%; display: flex; flex-direction: column; gap: 40px; }

.apresentacao_conteudo_titulo{ font-size: 36px; font-family: var(--fonte-secundaria); font-weight: 400; }

.titulo-destaque{ color:var(--cor-terciaria); }

.apresentacao_conteudo_texto{ font-size: 24px; font-family: var(--fonte-primaria); }

.apresentacao_botoes{ display: flex; justify-content: space-between; flex-direction: column; align-items: center; gap: 32px; }.apresentacao_botoestitulo{ font-family:var(--fonte-secundaria); font-weight: 400; font-size: 24px; }

.apresentacao_botoeslink{ display: flex; justify-content: center; gap: 16px; border: solid var(--cor-terciaria) 2px; width:50%; text-align: center; border-radius: 8px; font-size: 24px; padding: 21.5px 0; text-decoration:none; color: var(--cor-secundaria); font-family:var(--fonte-primaria); font-weight: 600; } .apresentacao_botoeslink:hover{ background-color:#272727; color: var(--cor-principal); }

.apresentacao_imagem{ width: 40%; }

.rodape{ font-size: 18px; font-family:var(--fonte-primaria); font-weight: 400; color:var(--cor-principal); background-color: var(--cor-terciaria); text-align: center; padding: 23.64px; }

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

.cabecalho_menu{
justify-content: center;
}

.apresentacao{
flex-direction: column-reverse;
padding: 5%;
}   

.apresentacao_conteudo{
width: auto;
}

}

Iajustar espaço nas extremidades da imagem

6 respostas
por Lorena Garcia
| 8074.8k xp | 11737 posts
Alura Scuba Team Suporte Educacional

Oii, Nathaly. Tudo bem?

Seria esses espaços? Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Preciso de mais informações para entender sua dúvida, como o HTML completo.Siga as orientações do guia de como fazer uma boa pergunta no fórum e me retorne com mais informações do problema.

Abraço.

por Nathaly Isabely Dos Santos Silva
| 37.1k xp | 25 posts

@lorena garcia Isso esses espaços das setas mesmo

por Lorena Garcia
| 8074.8k xp | 11737 posts
Alura Scuba Team Suporte Educacional

Oi Nathaly!

Certo, preciso do seu projeto completo para te ajudar.

Peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva.

Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Um abraço.

por Nathaly Isabely Dos Santos Silva
| 37.1k xp | 25 posts

ola link do github https://github.com/Natysilvadev/portifolio-p

solução!
por Lorena Garcia
| 8074.8k xp | 11737 posts
Alura Scuba Team Suporte Educacional

Olá!

Pelo o que vi do seu código, esse espaçamento ficou em telas com resolução de 820x1180, como um iPad. Vou focar na media query para essa resolução específica.

Você pode ajustar os valores de acordo com o que você desejar.

Adicione o código abaixo no seu CSS:

@media (max-width: 820px) and (max-height: 1180px) {
    .cabecalho {
        padding: 5% 10%;
    }

    .cabecalho_menu {
        gap: 40px;
    }

    .apresentacao {
        padding: 2% 10%;
        gap: 10px;
    }

    .apresentacao_conteudo {
        width: 100%;
        gap: 10px;
    }

    .apresentacao_conteudo_titulo {
        font-size: 28px;
    }

    .apresentacao_conteudo_texto {
        font-size: 20px;
    }

    .apresentacao_botoes {
        gap: 20px;
    }

    .apresentacao_botoeslink {
        width: 100%;
        font-size: 20px;
    }


}

Mudanças no CSS

  1. Adicionada uma media query para dispositivos com largura máxima de 820px e altura máxima de 1180px.
  2. Ajustado o padding do .cabecalho dentro da media query para 5% 10%.
  3. Reduzido o gap do .cabecalho_menu para 40px dentro da media query.
  4. Ajustado o padding do .apresentacao para 2% 10% e o gap para 10px dentro da media query.
  5. Reduzido o gap do .apresentacao_conteudo para 10px e o width para 100% dentro da media query.
  6. Ajustada a fonte do .apresentacao_conteudo_titulo e .apresentacao_conteudo_texto para tamanhos menores dentro da media query.
  7. Ajustado o gap e o width dos links em .apresentacao_botoes para valores menores dentro da media query.

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeUm abraço e bons estudos.

por Nathaly Isabely Dos Santos Silva
| 37.1k xp | 25 posts

Obrigada! ^^