four card feature section component

Solution retrospective
it took a day, but i completed this project with css grid the way i want, i made a silly mistake because of that i need to watch some videos but i didn't like their approach, maybe they are experts and their approach is better, but i want to do it in that way i did.
What challenges did you encounter, and how did you overcome them?It's funny, i created the div elements and a main but only added the material in one div, all other three divs were empty and i bashed my head for 4 hours, that what is the problem, why after creating rows and columns only one cell has material, and other cells were empty and the materials are floating outside, eventually i found that, and corrected it.
What specific areas of your project would you like help with?can someone go through my previous projects, i think their is a better way to center everything, i don't know why but every other project i open and did the same thing from previous projects, it won't work in current one, it just won't go in center, and then to complete the project i will have to mannually center it by either margins or position:relative feature.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@kmulqueen
The desktop design looks great! However, I noticed two main issues that are affecting your responsive implementation:
Your mobile layout has horizontal overflow causing content to extend beyond the viewport. This is primarily due to the fixed min-width of 1200px on your
.container
class. In responsive design, avoid using min-width with large pixel values as they prevent proper scaling on smaller screens. Regarding your centering struggles: I see you're using bothplace-content: center
andjustify-items: center
on the body, which is good, but your container's fixed dimensions are overriding these centering properties.Some specific suggestions that may help:
- Replace min-width: 1200px with max-width: 1200px in your
.container
class. - Add width: 90% or similar percentage-based width to
.container
. - Consider implementing a proper tablet layout between 768px-1100px.
- For the card images, replace the absolute positioning (
left: 12em
) with flexbox alignment. - Use
margin: 0 auto
instead of fixed margins to ensure consistent centering.
These adjustments should resolve both your mobile overflow and centering issues without requiring manual positioning.
- Replace min-width: 1200px with max-width: 1200px in your
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