[dúvida] [css] Dúvidas quanto ao @media no CSS (usando Sass)

Hiring Coders
, ,
#1

Olá, pessoal!

Gostaria de uma ajudinha sobre uma situação com CSS.

Quando criando minhas regras para o CSS de uma página, eu só sobrescrevo alguma propriedade com o @media, certo? Fiquei um pouco confuso com a situação abaixo:

O ponto é que a página não obedecia o @media, mantinha o height base, 400px, mesmo em telas menores que 480px. Erra regra não deveria ser aplicada para telas com largura máxima de 480px, conforme a regra criada que observamos na imagem? Precisei criar outra regra para telas maiores, com largura mínima de 481px, o que eu achei que seria desnecessário.

Qual peculiaridade dessa regra que eu não estou notando? Alguém consegue me dar alguma luz nesse assunto?

Obrigado!

Edit: só pra esclarecer o primeiro print: o height só foi comentado depois que eu criei uma regra no @media, caso alguém ache que estava com problema por este motivo.

Edit 2: Caso seja importante, estou usando Sass.

Edit 3: Repositório aqui.

6 Likes
#3

já tentou usar o position: relative no id #about?

#4

É necessário? Eu não só deveria sobrescrever ela com o @media?

#5

Oi @edubarros101,

Acho que o que pode estar acontecendo é o uso inválido nas regras do CSS, no código das imagens você adicionou o elemento P dentro de uma ID e depois as tags IMG e P dentro de outra ID.

image

image

Isso não é possível no CSS, o correto seria:

image

Sempre que for modificar algum elemento de uma ID ou Class é necessário colocar o nome da ID ou Class e em seguida o nome do seletor que deseja atingir como no exemplo da imagem acima. Já o segundo código ficaria da seguinte maneira:

image

Espero ter ajudado :sweat_smile:

3 Likes
#6

Já tentou ver a especificidade se realmente está igual?

#7

Isso é porque está usando SASS.

1 Like
#8

Está assim porque ele usou o SCSS, e ele usa a escrita um pouco diferente…

1 Like
#9

Veja no devTools do chrome ou no inspector do firefox se está pegando a regra de height: 400px com mais de 480px de width. Se está pegando a regra mas não se mantém em 400px de altura quer dizer que o problema não é de media query nem da especificidade do seletor mas de alguma outra propriedade do css.

1 Like
#10

Alias, pelo que da pra ver daqui o código parece estar correto. Pode postar ou subir o código pra gente dar um olhada se quiser.

#12

Verdade. Eu deveria já ter colocado o link do repo. Link aqui.

Atualmente, a página já está rodando normalmente, como eu mencionei, mas porque eu fiz uma @media específica pra ela, como também mencionado. Eu esperava que isso fosse sobrescrevido, criando uma apenas para a exceção. Link da página ativa aqui.

1 Like
#13

Eu não tenho certeza se entendi o problema, mas ao usar @media você ainda precisa lembrar da cascata. Para que as regras funcionem direitinho sobrescrevendo as anteriores é necessário que ela seja mais específica para ter peso maior (você pode colocar o nome da tag antes da id no seletor, por exemplo).

3 Likes
#14

Verdade, pulei a parte da regra especifica. Eu tirei a media query de 481px, e adicionei a propriedade height no #about de fora das media queries e pelo que estou vendo tem a ver com a especificidade dos seletores mesmo. Fora da media query o #about esta dentro do .container e dentro da media query esta so o #about. Então as propriedades fora de media query estão com mais força que dentro da mq, então o height: 400px de fora da mq está sobrescrevendo o height: fit-content de dentro.

1 Like
#15

Imagen 1: o width do browser é maior que 480px.

  1. Adicionei height 400px no #about fora da media query max-width: 480px
  2. Desativei a media query min-width 481px.

Ou seja, deixei como estava originalmente, o height de about é 400px com o browser maior que 480px.

1
11815×759 329 KB

Imagen 2:

  1. O width do browser é menor de 481
  2. As propriedades display e height da media query ficam desativadas por causa de…
  3. A especifidade do seletor fora de media query e maior que o da media query por conta da classe pai .container.

2
21797×758 247 KB

Imagen 3:

  1. Adicionei a classe .container no seletor da media query e assim ficando com a mesma especificidade que o seletor fora da media query, mas por conta de que o seletor está dentro da media query então tem mais força, por isso…

  2. as propriedades que antes estavam desativadas dentro da media query agora passam a estar ativas, e as que estavam ativas fora passam a estar inativas, ou seja sobrescritas pelas que estão dentro da mq.

3
31809×756 252 KB

1 Like
#16

@edubarros101 , eu não entendi muito bem sua dúvida, mas vou tentar ajudar.

Você pode usar os media queries para alterar qualquer propriedade em determinada resolução.
Usando “min-width: 481px” as alterações pegam em telas MAIORES que 481px.
Usando “max-width: 480px” as alterações vão pegar em telas MENORES que 480px.

Então vamos supor que seu #about tem no css base “height: 300px” mas na versão mobile você quer diminuir ele, então você usaria:

@media screen and (max-width: 480px) { 
  #about {
    height: 100px;
  }
}

Você ta alterando a propriedade height do about para telas com width MENOR que 480px.

Mas agora vamo supor que você quer fazer o contrário, você já tem um height de 100px no about mas quer aumentar ele para telas maiores que 480px.

@media screen and (min-width: 480px) { 
  #about {
    height: 300px;
  }
}

Com isso você ta definindo que em telas MAIORES que 480px o height do about vai ter 300px.

4 Likes