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!
@MelvinAguilar
Posted
Hello there 👋. Good job on completing the challenge !
To fix the problem try the next suggestion:
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
@danielmrz-dev
Posted
Hello @nnecak!
Your solution looks excelent!
I have just one suggestion:
<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
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
