Kevin Powell - Community•7mo ago

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

4 Replies

vince•7mo ago

Can we see your image css? Also would be very helpful to put this in a codepen: #how-to-ask-good-questions

mota77OP•7mo ago

Sorry about that https://codepen.io/Bruno-Mota-Mota77/pen/PovNdOo

Bruno Mota (Mota77)

CodePen

Overflow Err

...

b1mind•7mo ago

Two issues I can spot that cause overflow, without the image. The word "accompangnement" will not break unless you use word-break, or simply make it smaller to fit mobile screen widths. (good case for clamp() heading maybe, I do see you change it but not soon enough) Other is your 12 col grid gap is adding up to lots of space @ 4 rem. I honestly don't even see what benifit you get from the gap or 12 col grid but yea. that is all gap... 1fr's are reduced to nothing

mota77OP•7mo ago

Tanks a lot i will try it

Gaming

Programming

Using grid and on mobile overflows content