Skip to content
Submitted 10 months ago

Single price grid

Nick•260
@nn-code80
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone, this was my first time using grids, so any feedback would be appreciated. One issue i had during this project involved the height. When i shorten the screen vertically, the top aspect of the price grid gets cut out, and it cannot be scrolled. I noticed this when inspecting my project's responsiveness with different phone/screen settings. I tried many different ways to fix this but I have been unsuccessful. If anyone can point out my mistake i'd appreciate it. Thanks!

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted 10 months ago

    Hello there 👋. Good job on completing the challenge !

    To fix the problem try the next suggestion:

    • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

    I hope you find it useful! 😄

    Happy coding!

    Marked as helpful
    3
    Nick•260
    @nn-code80Posted 10 months ago

    Thanks for taking to time to help out, I appreciate it @MelvinAguilar

    0
  • Daniel 🛸•44,310
    @danielmrz-devPosted 10 months ago

    Hello @nnecak!

    Your solution looks excelent!

    I have just one suggestion:

    • In order to make your HTML code more semantic, use <h1> for the main title. Unlike what most people think, it's not just about the size and weight of the text.

    📌 The <h1> to <h6> tags are used to define HTML headings.

    📌 <h1> defines the most important heading.

    📌 <h6> defines the least important heading.

    📌 Only use one <h1> per page - this should represent the main heading/title for the whole page. And don't skip heading levels - start with <h1>, then use <h2>, and so on.

    This change has little or not effect at all on the project, but it makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

    I hope it helps!

    Other than that, you did a great job!

    Marked as helpful
    1
    Nick•260
    @nn-code80Posted 10 months ago

    Thank you for taking the time to share that information. I appreciate it.@danielmrz-dev

    1

Please log in to post a comment

Log in with GitHub

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