Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

My first submittion in 2021 :) Social proof section master

em 70

@emityiska

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

@yadprab

Posted

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

em 70

@emityiska

Posted

@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
Discord logo

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