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

used flexbox and media queries to make it responsive

@ThinYuShwe

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@tburette

Posted

Hello, You use a lot of div where you could use semantic elements instead. For example yo ucould use <main> instead of <div id="outerdiv">. <section> instead of <div id="firstpar">, ...

Your design doesn't work well when it is above 375px but still narrow. For example at 450px the "Why us" section is very narrow and the text hard to read.

An advice to fix this is to avoid arbitrary breakpoint such as 375px. Instead : choose the breakpoint based on the design insteadof a specific spot. To do that widen your mobile layout and determine when it start to become worse than the desktop layout. Pick that point as the transition point.

Marked as helpful

0

@ThinYuShwe

Posted

@tburette Thanks for your feedback. I will improve in those areas.

0

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