Design comparison
Solution retrospective
Hi ! I can't make my media query worked i don't understand what i've done wrong. If someone can help me with this one please . Thx
Community feedback
- @NaveenGumastePosted almost 3 years ago
Hay ! Jawaad Good Job on challenge
These below mentioned tricks will help you remove any Accessibility Issues
-> Add Main tag after body
<main class="container"></main>
-> Always use the "alt attribute" and write what img is , and if the img is for decorative then leave it empty but always add it with img tag.
-> Learn more on accessibility issues
If this comment helps you then pls mark it as helpful!
Have a good day and keep coding 👍!
Marked as helpful0 - @RioCantrePosted almost 3 years ago
Hello there! Good job in this challenge. Viewing the solution, I think you should consider the following as well…
- Wrap the whole content with the class of
fond
with specific tag likemain
. For HTML structures, refer it with this one Semantics - Add the
background-color: hsl(213, 89%, 90%);
in thebody
rule set - Inside the
.fond
rule set, removewidth: 90%;
,padding: 30px;
,margin-top: 50px;
andmargin-left: 30px;
. Addmargin: 8rem auto;
- Remove
border-color: white;
,border-style: solid;
,display: block;
,padding: auto;
,margin-top: 100px;
,font-size: 13px;
andmargin-bottom: 30px;
. Adjust the size withwidth: 300px;
and addpadding: 1rem;
- Remove
margin: auto;
,display: block;
, andpadding-top: 10px;
. Adjust the following:width: 300px;
andborder-radius: 10px;
- Add
font-size: 22px;
in thestrong
rule set. Alternative is to useh1
or one of the heading hierarchy. - Add
font-size: 16px;
andpadding: 1rem;
in.grey-text
rule set - Remove media query if needed
Above all, Well done! Keep it up and Hope this is helpful!
Marked as helpful0@RioCantrePosted almost 3 years ago@jaaw Awesome! I would appreciate it if you mark it as helpful! Cheers!
Marked as helpful0 - Wrap the whole content with the class of
- @amishvermaPosted almost 3 years ago
Hey Jawaad,
1)First of all, you did a good job in achieving the design. If you are working for responsiveness then try using relative units of CSS that is rem or em instead of px.
- You could have used the display flex property instead of adding too much margin which affects the overall responsiveness.
0@jaawPosted almost 3 years ago@amishverma Thx. Ok I'm gonna try this for the next challenge
0@amishvermaPosted almost 3 years ago@jaaw
- You could have used the flexbox to achieve the card in the center rather than applying too much margin which affects the responsiveness
Marked as helpful0
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