Design comparison
Community feedback
- @zenab12Posted over 2 years ago
Hey ,You did amazing work congratulations for completing this challenge
To fix accessibility issues :
- Page must contain level-one-heading so use
<h1></h1>
instead of<h2></h2>
------------------------------------------------------------------ Tip ---------------------------------------------------------------------
- don't use Two h2 as heading is one sentence so you can use this :
Html
<h1> Reliable, efficient delivery <span>Powered by Technology</span> </h1>
css
h1 span { display: block }
-
use media query for mobile and Ipad but in this challenge you will use for mobile only with min-width:375px or smaller and max-width:775px.
-
don't give section or div specific height that will damage the responsivity in mobile remove height and use min-height instead.
-
don't give
section.top
andsection.bottom
any height as content will overlap above each other in Ipad and Mobile screen. -
use grid template instead using position and top or left as this
/* give semantic classes names to divs and section so instead of bottom class you can rename it to **cards** and and give children class name as card and semantic name about what is contain as **Supervisor,Team Builder ,etc...** */ section.cards { display: grid; grid-auto-rows: minmax(200px,auto); grid-template-columns: repeat(3, 1fr); grid-template-areas: 'Supervisor Team-Builder Calculator ' 'Supervisor Karma Calculator'; gap: 30px 30px; } .cards .card.Supervisor { grid-area: Supervisor; align-self: center; border-top: 5px solid var(--Cyan); } .cards .card.Team-Builder { grid-area: Team-Builder; border-top: 5px solid var(--Red); } .cards .card.Karma { grid-area: Karma; border-top: 5px solid var(--Orange); } .cards .card.Calculator { grid-area: Calculator; align-self: center; border-top: 5px solid var(--Blue); } @media(max-width: 775px) { section.cards { grid-template-areas: 'Supervisor Supervisor Supervisor' 'Team-Builder Team-Builder Team-Builder ' 'Karma Karma Karma' 'Calculator Calculator Calculator'; } } @media(min-width: 775px) and (max-width:1100px) { section.cards { grid-template-columns:repeat(2,1fr); grid-template-areas: 'Supervisor Team-Builder ' 'Karma Calculator'; } }
and this guide to use Grid
-
give cards border-radius to be more beautiful
-
you can use variables in css and save colors or fixed sizes in variables like this :
:root { --main-color:#3829e0; --font-family:'Red Hat Display',sans-serif; } h1 { font-family:var(--font-family)/*to call value of the variable*/ }
Regardless You did amazing I hope this is useful to you... Keep coding👍
0 - Page must contain level-one-heading so 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