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-feature-section

@MojtabaMosavi

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


Any suggestion on how to improve it is appreciated.

Community feedback

@AgataLiberska

Posted

Hi @MojtabaMosavi! Well done on this challenge, it looks great! The only thing I see is that it would be good if the container was centered on the page, on my screen it's more towards the left. It's an easy fix, try using dev tools to find it, and let me know if you're struggling - I'll help you out :)

Oh and consider using rem or em as your units instead of px - it makes the design more accessible (the default font in most browsers is 16px, but users can change that, and the design should scale accordingly - but if you use pixels, it won't)

Hope this helps! :)

1

@MojtabaMosavi

Posted

Hi @AgataLiberska, thanks alot for the comments, I put margin: center; on the contianer to centre it but I guess there is some wrong styling that caused it. Great comment about on the units. Thank you :).

0

@AgataLiberska

Posted

@MojtabaMosavi margin: auto is a good way to center your container, but I was talking about your <body> styles. You've set the max-width there to 1440px, so it won't stretch past that size, it will just keep adding margin on one side - that's what's causing the container to be more on the left side on screens wider than 1440px. You can see the computed padding and margin in dev tools on your browser.

Try setting max-width on your container instead (the value may be different than 1440px) :)

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