Design comparison
Solution retrospective
Wow this was a time consuming one. Found positioning the images on desktop and tablet hard and still not satisfy with what I got. Figuring out the breaking points wasn't easy.
Community feedback
- @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 noheader
que nao estao pegando a largura inteira depois de 1000px.Pra solucionar isso, o jeito que eu achei foi usar
position: absolute
na image erelative
na section com ooverflow: 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 helpful0@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@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@paulaabroPosted about 2 years ago@correlucas sim fiz mobile first mais ele pega a imagem do tablet nem é do mobile
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord