Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
7 replies
mota77

Using grid and on mobile overflows content

Hi there, I hope you fine.

I had a problem with CSS grid

As seen on image the mobile view have a overflow the css for the grid:
.container {
  
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1rem;

}
.grid-conteiner{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  gap: 4rem;
}
.hero-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    align-items: center;
    gap: 2rem; 
}


In DevTools when i select phone doesn't overflow

Thanks in advance
Was this page helpful?