Design comparison
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
- @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 ofheight
. 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 helpful3@nn-code80Posted 10 months agoThanks for taking to time to help out, I appreciate it @MelvinAguilar
0 - Use
- @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 helpful1@nn-code80Posted 10 months agoThank you for taking the time to share that information. I appreciate it.@danielmrz-dev
1 - In order to make your HTML code more semantic, use
Please log in to post a comment
Log in with GitHubJoin 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