Responsive product preview using scss and bem methodology
Design comparison
Solution retrospective
I would be glad to receive some feedback about my solution, i feel like there are a number of areas in which i could improve the code but i am not sure about which part, another thing is that the generated screenshot is not matching the live site, could anyone help me with that ?
Community feedback
- @elaineleungPosted about 2 years ago
Hi Tiago, well done here! About your question on the screenshot, it's mainly the Fraunces font family at play here (you can compare just the title on the images and see). To fix this, just go to Google Fonts to grab the link again for the Fraunces font faces, but this time uncheck the box for optical view. That should be able to do it!
Since Adriano gave you some great tips already, the one I'll offer is you can add a bit of margin around the card (1.5rem or 2rem maybe?) so that the sides of the card won't be touching the browser at smaller screen sizes.
Great job on the whole!
Marked as helpful1@tiago-jv0Posted about 2 years ago@elaineleung Thanks for the recommendations, i will follow your advices and implement right away !!
0 - @AdrianoEscarabotePosted about 2 years ago
Hello @tiago-jv0, how are you?
Congratulations on the result of your project, the layout was identical to the example, the figma design helps, right? ahahahahaha
I have a few tips that I think you will like:
I noticed that the content in smaller resolutions is not centered, prefer to center the content in all resolutions:
body { display: flex; align-items: center; justify-content: center; min height: 100vh; }
The rest is really good!
Hope it helps... 👍
Marked as helpful1@tiago-jv0Posted about 2 years ago@AdrianoEscarabote Thanks for the advice, i will implement it.
0 - @correlucasPosted about 2 years ago
OI Tiago, beleza?
Acabei de olhar sua solução e ficou mto bom o código, achei bacana que vc usou variável pra quase tudo e isso dá um controle enorme caso vc precise mudar algo futuramente.
Uma coisa que vc pode melhorar, é o
height
do body pramin-height: 100vh
pq desse jeito vc declara que a tela tem que mostrar sempre no mínimo 100 do viewport height e já comheight
é um valor fixo e não responsivo, diferença mínima, mas em um projeto com mais de um Componente poderia causar algum problema.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