CSS GRID Pushed to the Right

Hi,

I managed to complete the final responsive project, but I have spent a long time trying to get the card UI in the projects section to work properly.

I built it in CSS Grid and it looks fine in desktop but as soon as you shrink down you can see that it moves slightly to the right.

I really cannot figure out why this is happening. But from using the Firefox Dev tools it looks like the Grid in the projects section is in the wrong place once you shrink to a certain size.

I have included the a codepen link any help would be much appreciated.

1 Like

Welcome to the community @bestbassist3,

And thank you for the opportunity to comment on your project.


Why don’t you try a separate media queries for all the elements?

Also, I think it’s more convenient to use flexbox to display elements of a parent. And grid to move the parent elements around.

But it’s workable with the grid system, anyways. I didn’t see a grid-template-areas. Have you tried named grid areas? You can name your grids and select the media query. When you hit the media query, you can place the names of your grid one on top of each other and it works like magic.

I could also see that your grid has all its elements without a div. Why don’t you try to put the heading and the image on one div, and the other two in one div. That way, you could have to elements to move around.

Like so:

 <div class="parent-grid">
   <div class="child-grid-1">
    <div class="image">
       <img />
    </div>
    <div class="anchor-link">
       <a></a>
    </div>
   </div>
  <!--Above you have the first image, and below, the second image.-->
   <div class="child-grid-2">
    <div class="image">
       <img />
    </div>
    <div class="anchor-link">
       <a></a>
    </div>
   </div>   
</div>

Take a look at this 5 minute read about media queries:

Thanks for the answer. I plan on putting it in place tonight. I just had a few questions.

The problem I have is that the grid seems to be slightly to the right. First do you know what the problem is called?

Your solution from what I can tell is to create a grid for each card and place those grids on a larger grid. So is the idea that if I specified the larger grid that they wouldn’t move?

Also if that was the case would I have to style them as cards without grid first that stack on top of each other? And then switch on grid when min-width was 600px or something to give me a side by side grid?

1 Like

Hi I figured out what is happening the Grid container is shrinking but the grid items aren’t. Is this something that I would have to fix by using flexbox?

It just seems strange as they are on the grid and then they leave it do I need to be setting a height so they continue to shrink with the container etc?