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

Responsive layout using HTML / CSS.

#accessibility#bem#contentful#lighthouse
Petru Banceanuā€¢ 110

@Petru14

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


I have only one problem with this challenge, it's the mobile navigation, the value set for height isn't the best practice but I tried a few solutions but unsuccessfully. Any feedback it's more than welcome.

Community feedback

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

Hey Petru, good work here. For your question, I don't see a nav for this particular design, so I'm assuming the issue is setting an explicit height for the mobile view. If you remove the heights set for main_container and testimonials, the content will naturally stack, just like the mobile design.

A few more thoughts:

  1. Use mobile-first for CSS. It's easier to scale up your contents than make large elements fit into smaller screens.
  2. I would remove the height and width styles for the html and body. You don't need them for this particular design. Let the content dictate the dimensions of the project.
  3. The layout looks really squished at 376px. Adjust the breakpoint so that it breaks into desktop view at an appropriate screen width, around 992px or above.
  4. main_container doesn't need a huge margin around it. Center the element with margin-inline: auto. It also doesn't need grid. It's children are div and section - both are display: block by default (will span the entire row) and will therefore stack.
  5. Add a README.md for us to get a peek at your process.

There's a bit more to unpack here but I think more practice with flexbox and grid will help you improve on your next project. Hope this helps! :-)

Marked as helpful

0

Petru Banceanuā€¢ 110

@Petru14

Posted

@emestabillo Thank you for your feedback!

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