My first submittion in 2021 :) Social proof section master
Design comparison
Solution retrospective
Hi, this is my second project. I am still a newbie so please advise if there is anything I can do better to improve the efficiency and the readability of my coding.
While working on the responsibleness for this project, it felt more like creating 2 different websites for mobile screen size and desktop screen size than because of the length of @media property.
For the bg-container In@media property, I had to set the height to 2000px because when I set the height to 100%, it didn't fill up the whole screen which made the bg-bottom to show up in the middle of the mobile screen.
I don't know why this happened because the bg-container div fills up the whole screen on the desktop screen with 100%height.
Thank you!
Community feedback
- @yadprabPosted almost 4 years ago
hey, you did a great job design looks perfect.don't set the height until its necessary remove the 2000px try 100vh or set html{ height:100% } and don't use position absolute only use it for overlay stuff div, section tags are block elements it will take up the height according to the content always start with mobile first approach look at the both design analayze structure html according to design
for cards, the grid is the best way to create responsive cards set card width using grid-template-columns(auto-fit, 300px) for card height use grid-auto-rows if the content is enough you don't grid auto rows
and for padding don't use percentages use em or rem
keep learning
2@emityiskaPosted almost 4 years ago@yadprab Thank you so much for your advice! Yes, I should probably look into different units. Yes Grid system came in handy for this project. I will play around with it to get used to the system. I appreciate your input. :)
1
Please log in to post a comment
Log in with GitHub
Join 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