Search code examples
htmlcsscss-grid

Why won't the grid columns expand to the entire width when I'm viewing this in mobile view?

I'm trying to figure out why I can't get this grid template to expand and/or even center the viewport. It works fine and as expected in desktop view...

Any ideas? Let me know if you require any more code snippets.

here is a screenshot of the problem

.grid-container-columns {

height: 100%;

display: grid;

grid-template-columns: repeat(12, 1fr);

grid-gap: 16px;

align-content: stretch;

}

header#home-section h1 {

grid-column: 3/span 8;

justify-self: center;

align-self: center;

text-align: center;

padding-top: 10rem;

z-index: 1;

}

The container div just provides a max-width of 1100px with a margin 0 auto.

Thanks for any help!

Solution

  • I think you want to remove those blank spaces inbetween? If so, change

    grid-gap: 16px;

    to

    grid-gap: 0;

    Or even beter remove it completely if you don't use it. Also to center it, you'll need

    html, body{
   overflow: hidden;
}