Responsive to screen size max-width: 940px

So I’ve managed to get this project to display block at max-width: 480px with a media query but it’s baffling me what to do with it at screen width 480-940px as I have an inline-block that needs to decrease to possibly a 2x2 grid, or should I shrink the elements to fit the page? They would end up quite small, maybe too small? I think the 2x2 grid would work better if anyone can help with this. I’m not very familiar with the grid systems in css

decision on wand movement (codepen.io)

This has no effect it just displays all child elements inline vertically

@media (max-width: 940px) {
  #i-container {
    display: grid;
    grid-template-columns: 235px;
    grid-auto-rows: auto;
  }
}

You will have to explain what it is you are trying to achieve and what it is that isn’t working as intended.

The media query you have does work. It might not be doing what you want it to but it does work.

I need the spinning icons to display a 2x2 grid when screen size is reduced to 940px. There is a seperate media query for screen-widths less than 480px which display block vertically .

I’ve managed to get the 2x2 grid but it overrides the max-width:480px media query and is not centered

would container-fluid work automatically if declared for the parent conatiner?

The over ride is sorted I moved the css max-width:940px above the max-width:480px declaration so it is declared after and not before. The centering of the 2x2 grid is an issue now

New Homepage (codepen.io)

I’ve tried this for the centering of the items in the grid but it doesn’t work

@media (max-width: 940px) {
  #i-container {
    display: grid;
    grid-template-columns: repeat(2,  1fr 1fr);
    grid-auto-rows: auto;
    row-gap: 30px;
    /* NOT WORKING 
    justify-items: center;
    align-items: center; */ 
  }
}

Frustrating! It’s pretty much all I need to finish the page

You shouldn’t be using <br> elements, you create space between elements using padding/margin/gap. The <br> element is meant for line breaks in text.

If you remove the <br> elements from your grid you can also see what type of grid you have actually created.

Repeating 1fr 1fr twice (i.e. repeat(2, 1fr 1fr)) is 1fr 1fr 1fr 1fr so a four column layout. If you look at the computed properties in the browser dev tools you can also see this.

  1. Remove the <br> elements from the grid.

  2. Make it a two-column grid (e.g. 1fr 1fr).

Thank you that sorted it

Can you see a problem with the #inspire-div ? it’s slightly raised compared with the others and I can’t find the issue

It’s okay I think I’ve found it. The image itself looks slightly larger than the rest

Just so you know I can’t see any of the images on Codepen. If you can, I’m guessing it might be because you are logged into your Google account. You should use the direct image link (so ending with an image extension like .jpg) but even then google might not be the best host to use for images on Codepen (not sure).

You can use GitHub

okay thank you. Yes they are from my google drive as they wouldn’t upload to codepen or googlesites directly from the computer

You can also try https://postimages.org