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

Responsive Card feature section using HTML and CSS

@kofinartey

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


Hi there, so I'm not sure if I'm supposed to write this much code under the media query for the destops. Can anyone help identify a better way to refactor?

Community feedback

Fraser Watt 1,790

@fraserwat

Posted

This is looking good! I would look into why at a larger screen width the cards are appearing off-center and skewing to the left.

A good place to look here would be to use margin: auto; to centre your divs. Can be frustrating, but this is a good starting point: https://www.w3schools.com/css/css_align.asp

You could also use max-width on the .card-container class to keep the gap between the cards relatively consistent at larger screen widths.

1

@kofinartey

Posted

Hey @fraserwat, happy to read your feedback. I don't seem to have off-centering issues on my side, probably because I'm on a laptop and do not not have much screen real estate to view at larger widths.

I am glad however that you brought up the max-width comment on the card-container, it fixed it.

Super grateful

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