Help with formatting issue CSS

Hello,

I was hoping someone might be able to help with a formatting issue I have. Basically when I decrease the size of the window, its possible to scroll across the body of the site which leaves a blank bar to the right hand side of the page. The nav bar seems fine, and I have no issues when its full screen or on a mobile device. The issue just comes up between a specific range of window sizes. I know my CSS is a bit of a mess, I’m currently trying to clear it up a bit. I’ve copied my codepen below and added a picture. Any ideas? Thanks!

https://codepen.io/jamiegaskell89/pen/poEJLvv

I guess the issue is here:

@media (min-width: 1250px) {
  
  #project-grid {
    display: grid;
    grid-template-columns: 700px 700px;
    justify-content: center;
  }
}

Two columns with 700px each is 1400px. Obviously doesn’t fit in a page that’s 1250px wide.

@media (min-width: 1250px) {
  
  #project-grid {
    display: grid;
    grid-template-columns: 700px 700px;
    justify-content: center;
  }
}`you have 3 @media selectors, the last one is the one above and it's the one overriding all others according following css rules`

Thanks both, hugely appreciated. I’ll look into this later. Then I need to clean up my code!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.