Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

four card component

@Hazard-58

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I struggled with desktop responsivity , the code is a mess but I can't make it better, any advices will help

Community feedback

Nader 300

@youtubbeh

Posted

Hi Mohammed, On first impression, looks good to me! There are some things you can improve, though:

  • There are some typos on your text: MOnitors, avaluate, taent.
  • Using semantic html tags. I would suggest you use <main> instead of <div class="container"> for your main container. <main> is a semantic html tag that better informs the browser what the content is about.
  • Use h2 instead of h3 because you shouldn't skip h tag orders. This is also a semantic html best practice.
  • Be careful to include <alt> tags for accessibility on your images.
  • On mobile, your boxes look a bit squeezed, I would suggest you make the main container's width a bit smaller when screen width gets to 400px or lower. You can do this by adding a media query and in there setting a width for the main container: @media all and (max-width: 400px)...

Marked as helpful

1

@Hazard-58

Posted

@youtubbeh thank you for your advices, I'll try to take it on consider the next time :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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