Skip to content
Submitted over 4 years ago

Four Card Feature Section using (S)CSS Grid

Fraser Watt•1,790
@fraserwat
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  1. This was the first time I'd used CSS Grid (and I think it shows!). I'm sure there must be a more elegant way of positioning my card items than doing different grid row/col configurations in a bunch of media queries in SCSS. Any feedback on this v much appreciated.

  2. Issue with footer - setting position: absolute; bottom:0; positions it correctly in desktop but when the width of the page gets narrow enough to push the boxes down, my footer seems to break and it becomes a floating element. However, when footer set to position: relative; bottom: 0;, it fixes the issue of floating over the CSS grid, but on desktop its too high up (close to the feature cards, which I've kept as is the "least broken" result). Any ideas on this?

Aside from those two (quite minor) issues I'm quite proud of this one! 😊

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    What happens between 640 and 768px? (I don't think you need that first media query 😉)

    Try adding min-height 100vh to your body see if that solves the footer issue you mention (which I can't see by the way, previewed on mobile)

    Anyway this is nice, good work ☺

  • Kofi Nartey•650
    @kofinartey

    Hey, great stuff you have here. Not that it really is a problem, but the content get squished when you go beyond 300px . I suggest you consider adding a min-width of 375px, that way you can't squeeze the site beyond that.

    Great work however.

  • Raymart Pamplona•16,040
    @pikapikamart

    Hey good job working on that one. Regarding your questions

    1. Grid column and row configuration in different breakpoints is all okay, nothing wrong with that, that is what grid is made for, to create different layouts when you like in a certain breakpoint right.

    2. Your footer seems fine? It is okay when I view them, did you already fixed it? Then you don't have to position it relative and setting it to bottom, since nothing of your element is positioned to go out of flow. Your footer will work without having those 2 styling^

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