four card feature section master using CSS grid
Design comparison
Solution retrospective
I thought it'd be beneficial to use CSS grid to make this, in order to strengthen my css grid knowledge, but i feel like there are many things that can be done better: 1- I couldn't make is responsive enough, meaning, when the window is smaller than the desktop resolution and larger than the mobile resolution, the webpage is an absolute mess, so how can i fix that? 2- When it comes to the team builder and karma section i had to wrap them in a div to be able to use the css grid properties on them, and i'm pretty sure that's not necessarily the only way to do it, but i found it a bit hard to do that without including them inside a div tht i positioned using css grid, so how can i fix that? thank you! also if there's anything else i should fix or work on, please let me know
Community feedback
- @visualdennissPosted over 1 year ago
Great job completing the challenge successfully! Looks great overall.
Q- I couldn't make is responsive enough, meaning, when the window is smaller than the desktop resolution and larger than the mobile resolution, the webpage is an absolute mess, so how can i fix that?
A- It looks like you have set up margin-left and margin-right (150px each) to the sections, that cause the middle section to squeeze. Instead apply the margins to the whole container in such cases, rather then individual sections. e.g. you can add a padding: 0px 150px; to the container itself, and remove that padding on mobile. Also change the breakpoint to a higher px value to prevent layout breaks at certain browser widths.
Hope this was helpful!
0@HadjerKhelil00Posted over 1 year ago@visualdenniss i just tried that n it didn't work :/
0@visualdennissPosted over 1 year ago@HadjerKhelil00
.container { margin-top: -3%; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); column-gap: 3%; height: 100%; padding: 0px 150px; }
remove margins and widths here:
.supervisor { grid-column: 1/2; grid-row: 2/3; justify-self: center; align-self: center; border-top: solid hsl(180, 62%, 55%); box-shadow: 0 9px 9px rgba(0, 0, 0, 0.1); height: 250px; color: hsl(234, 12%, 34%); font-size: 15px; position: relative; }
.calculator { grid-column: 3/4; grid-row: 2/3; justify-self: center; align-self: center; border-top: solid hsl(212, 86%, 64%); box-shadow: 0 9px 9px rgba(0, 0, 0, 0.1); height: 250px; color: hsl(234, 12%, 34%); font-size: 15px; position: relative; }
.team-builder-karma { grid-column: 2/3; grid-row: 2/3; justify-self: center; }
and remove the padding of the container on mobile. This seem to work for me for your site, tested on developer tools.
0
Please log in to post a comment
Log in with GitHub
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