3
respostas

Section bottom-hero pegando a margem global

Fiz exatamente como a da instrutura a seção bottom-hero, mas a imagem está herdando a margem declarada no global.css, como resolver?
Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas

Pelo que vejo, a section está herdando o valor, não a imagem

Quando coloca 0 auto 80px, você está colocando margem 0 encima, centralizando na horizontal com margin auto e colocando 80px embaixo da imagem...

mesmo problema alguma ajuda ?

Não sei se é a melhor forma, mas primeiro adicionei no index.html a classe "no-style" para modificar somente ela, da seguinte forma:

<section class="bottom-hero no-style">

E então em global.css modificar:

section {
  width: 312px;
  margin: 0 auto 88px;
}

Para:

section:not(.no-style) {
  width: 312px;
  margin: 0 auto 88px;
}

Porque ele está se comportando como todos os outros "sections" com as margens laterais, então dessa forma bloqueamos esse estilo para o section com "no-style"