Design comparison
Solution retrospective
Basically, almost similar to the Results Summary Challenge so I was able to finish this faster. Just a minor problem with the media query, whenever I try to check Chrome Dev Tools, my flexbox direction doesn't adjust the layout correctly. I need to toggle device toolbar first before it corrects the layout. I was thinking if I add flexwrap, it might fix it.
Community feedback
- @HassiaiPosted over 1 year ago
Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.
For a responsive image that will change the images at different screen sizes use the picture tag. For more click here
To center .container on the page using flexbox, replace the height in the body with
min-height: 100vh
.in the media query, give .container a fixed max-width value instead of a padding.
max-width:400px which is 25em/rem
, give .panel1 and .panel2 a width of 100%.Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful1@wilbrosPosted over 1 year agoThanks, @Hassiai ! I'll keep these in mind. I will try and revise my code for this challenge.
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