Skilled Landing Page w/ @media

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Oi de novo Paula hahaha. Parabéns pelo desafio!

  Eu fiz esse desafio e sei o quanto ele é chatinho de fazer, a parte mais chata é a imagem que tem que ficar um pouco fora do container e eu levei uma semana fazendo esse. Percebi que vc aplicou as media queries mas mesmo assim a imagem fica quebrando o layout como vc pode ver no footer e no header que nao estao pegando a largura inteira depois de 1000px.

  Pra solucionar isso, o jeito que eu achei foi usar position: absolute na image e relative na section com o overflow: hidden pra fazer ela sair do container fazendo um crop pra fora sem empurrar o conteúdo usando `transform: translateX (-50px) pra fazer imagem sair.

  Vou te deixar o link da minha solução onde vc pode consultar como apliquei isso na imagem e vc pode ler tbm os comentarios onde um cara me explicou passo a passo como resolver isso, caso vc queira algo mais detalhado:

  https://www.frontendmentor.io/solutions/skilled-elearning-landing-page-vanilla-css-wr-dMF3Qk1

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  0

  ---

  

  Paula Rodrigues•250

  @paulaabroPosted about 2 years ago

  @correlucas estou percebendo um monte de inconsistências na minha solução seria possível vc me ajudar? Não consigo entender pq ele não pega a imagem do desktop.

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @paulaabro Oi Paula, só fui ver seu comentário agora, assim que eu tiver um tempo eu vou abrir seu código e ver certinho, olhei bem rápido pelo celular e acho que seria pq como <img> vc colocou a imagem mobile. Vc fez esse desafio com mobile first?

  0

  

  Paula Rodrigues•250

  @paulaabroPosted about 2 years ago

  @correlucas sim fiz mobile first mais ele pega a imagem do tablet nem é do mobile

  0