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

mobile first Single price grid component using html/css and SASS

Val 95

@el-shredders

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm not really happy with all the fixed values used in width, height box element etc. Feels a bit static. I tried to make the grid, font (...ect )grow with the size of the window, but did not succeed to keep a good ratio. I ended up doing it simple. Maybe i was trying to overcomplicate things for this project.

Any feedback, ideas welcome thanks

Community feedback

Roman Filenko 3,335

@rfilenko

Posted

Hey, you can start from mobile styles - like setting on main element {width: 90%; margin: 2rem auto;} and some max-width. Also it will be better to define border-radius and box-shadow on parent div (.grid-container in your case), not to set those separately for all children elements.

Roman

1

@AhmedHussein2095

Posted

Hello, i have same experience u had. and ended using static values like px. and in every screen i try to change it abit.. increaing or decreasing, in every screen. to be suitable with the every viewport.

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