mota77 Posts - Answer Overflow

mota77

•Created by mota77 on 5/21/2024 in #front-end

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; 
}

.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

8 replies

Gaming

Programming