Submitted over 3 years ago

Huddle Landing with Intro Section CSS Grid

Raghav Kapur•215

@codingkapur

Preview site View code

This is a solution for...Huddle landing page with a single introductory section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey,

At 1440px and 375px, the site looks fine. But it behaves weirdly between 888px(a media query starts here) and 1156px. After 1156px, it goes back to the way it is supposed to work.

Can you look at the code and see what's wrong here. I'm guessing the image size has something to do with it, but I couldn't find a solution so would love to hear your take.

If you have done this challenge using css grid and everything works fine, please share your solution with me.

Thanks!

Community feedback

Patrick•14,265
@palgrammingPosted over 3 years ago
Looks like you have conflicting media queries. Try to take them all out the different places of you CSS and group them all together. Then try to follow the logic of what each of them are doing and which are undoing what the other one did
0
Raghav Kapur•215
@codingkapurPosted over 3 years ago
After tinkering around, it appears that the auto-fit property does not work if any of the grid items are explicitly placed somewhere ( for example using on the header this property-> grid-column: 1/ -1). If items are explicitly placed, auto-fit works like auto-fill.

So the solution was to add the elements that required responsiveness in another grid, nested in the main grid. Now, auto-fit works like it is supposed to.

The satisfaction of closure is pristine.

Thank you for the feedback and happy coding!
1
Patrick•14,265
@palgrammingPosted over 3 years ago
@codingkapur Interesting glad you figured it out
0

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