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 challenge

jcastro 270

@romzcastro

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


responsive using html and css, although one thing i notice is when i view it on devtools in mobile view i have to zoom out just to see the whole page instead of having a scroll down. any tips?

Community feedback

@Sherif-Nabil

Posted

Hello jcastro

Congratulations on completing the Single price grid component challenge! 👏 I've reviewed your code and found a few things that could be improved.

1.The style is not working

The style is not working because the path to the style.css file in the index.html is incorrect. You have an extra dot in the path name. Please change the following line of code:

<link rel="stylesheet" href="../css/styles.css" />

to this

<link rel="stylesheet" href="./css/styles.css" />

2.For the mobile scrolling issue

You may need to delete overflow: hidden; property and change the body height to min-height

also adding some padding (padding top and bottom will be enough) to the body will prevent the content from sticking to the top of the page

I hope these will be helpful to you 😉

Marked as helpful

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