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 Page!

@eduardosgn

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


Hello! If someone have tips and give a feedback to improve my code, it would be welcome! Thanks

Community feedback

@pikapikamart

Posted

Hey, awesome work on this one. Desktop layout content looks thinner compared to the design and the site is not responsive at the moment. When you say responsive, it does not only mean that it looks good on desktop and mobile, it is responsive if when even resizing the browser's width, the layout still looks great. Try to inspect the layout in dev tools, try changing the screen's width and see how the site looks like. Though the mobile layout looks good.

Jesse Ma already stated great tip on this one, just going to add some suggestions as well:

  • Avoid using height: 100vh on a large container like the body tag as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • Same for the main do not use vh unit and you don't really need to alter the height props though, removing that would be great.
  • I wouldn't really use header on this one since it just looks like a main-component all throughout.
  • For the ratings section, you don't really need to use ul on those, you could have just use background prop and set all those 5 stars for each container, that way you won't have to use ul on it.
  • Each testimonial could use more width or just in general that whole content of the page could use more width to be wider.
  • Person's img should only use the person's name, no need to add the verified buyer.
  • When using heading tag, make sure you aren't skipping a level. If you use h3 make sure that h1, h2 are present "before" it.
  • Another tip, you can use blockquote on this one since they are suited for testimonials.
  • Lastly, making the site much responsive :>

Aside from those , great job again on this one.

1
Jesse Ma 95

@jma26

Posted

Not a bad start! I'd recommend looking into updating the semantic elements of your upper-half part. You have a header tag wrapping the actual header and the star review section. I think it'd be wise to actually separate the star review section as its own section to be more semantically valid

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