Submitted over 3 years ago

My first little layout with css Grid and Flexbox.

Enol Igareta• 115

@Enol-Igareta

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

My first code. I have been studying self-taught for 1 month. Try to make the best use of gridd and flexbox. I accept any help, advice and criticism. Thanks for your time :)

Community feedback

Mijail Hernandez• 950

@MishaHernandez

Posted over 3 years ago

Hi Enol-Igareta!

The problem is the left margin of the image (.card__img) inside the main container ( .container), this margin has a size that overflows the grid, and finally the margins that help to center this container also overflow it from the viewport.
A solution would be to remove the left margin and align the image using flexbox or assigning it display: block; margin-left: auto;

Greetings and I hope my comment has been useful :)

Enol Igareta• 115

@Enol-Igareta

Posted over 3 years ago

Why is the design comparison out of square with the original design if my live server is in the center? sorry

David Ouma• 270

@daudi13

Posted over 3 years ago

@Enol-Igareta Hi, try to horizontally center your header in your media query by probably adding a width and a margin auto. I think that should work because I experienced the same problem too. Keep up the good work. Happy coding!

Please log in to post a comment

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