Responsive page with HTML and CSS with active hover effects
Design comparison
Community feedback
- @Akhil-NagpalPosted over 1 year ago
Hello there! 👋 Congrats! on completing this project
First, you need to solve your accessibility error. Here's how:
- The
<h1>
through<h6>
element tags must be in a sequentially-descending order for headings to be in a correct logical order.
I have some other suggestions!
- Width doesn't need in the body. And I think you miss to add background size, repeat & color. Please add these to fix them.
background-color: hsl(225, 100%, 94%); background-repeat: no-repeat; background-size: contain;
- The size of the card is less. But you can use this hack, just adjust the screen size to 75-80% this will make your screen size 1440px, which is needed to build the desktop version.
You can also see my solution for a better understanding of background & size.
Otherwise! You did a great job 👌
Happy Coding! 😊
Marked as helpful1 - The
- @HassiaiPosted over 1 year ago
There is no need to give the body a width value, give it a background-color of pale-blue, background-repeat of no-repeat and background-size of contain.
For a responsive content , there is no need to give the main a height value replace the width with max-width and increase it value for it to be equivalent to the width of the design.
max-width:27rem/em which is 432px
.Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful1@DesireyePosted over 1 year ago@Hassiai Thank you, this helped a lot! I'll be sure to use this in future projects
0
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