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

Single price grid component

P
Matt 50

@Matt-LaRochelle

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 feel like I did a better job simplifying my CSS but the organization of it is not very intuitive. Does anyone have any tips as to how they organize their CSS and maybe any specific tips after looking at how I organized my CSS or is it just always kind of messy?

Thank you

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @Matt-LaRochelle!

The organization of your code looks pretty good to me!

I have just one suggestion:

  • Remove this line from your code:
main {
    overflow-y: scroll;
}

This is causing a vertical scrollbar to appear sometimes. I don't see any reason for a scrollbar on this project, since the whole content is visible both on mobile and desktop versions.

I hope it helps!

0

P
Matt 50

@Matt-LaRochelle

Posted

@danielmrz-dev

Thank you for your feedback!

The reason I included a vertical scrollbar is because if someone is on a phone and turns the screen sideways, you will need a scroll in order to see the whole project. I don't know if it only has to be viewable at 375px and 1440px as it says those are the two design widths for this project? I always want the project to be viewable on any screen size so that's the requirement I set for myself... Maybe I am trying to cover too many edge cases?

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