Grid Column Overlapping on Mobile

Design help General
1

Hi all,

I’m currently restructuring my website using the Lumos framework and I have a u-grid-column-2 class on my team CMS. I have put in the custom attribute of grid-template-columns: repeat(1, minmax(0, 1fr)) so it turns to 1 column on mobile landscape and portrait and it works perfectly in designer mode but when published the columns are overlapping. I’m not sure why this happened but would appreciate any help and advice!

IMG_1685867DC314-1
IMG_1685867DC314-11284×2778 223 KB

Here is my site Read-Only: Webflow - GZLZ Design

2

Hi Mayra,

I checked your issue and one thing you have to understand here is that when you make a grid child 2 columns using span, it makes whole grid 2 columns that is what happening on your layout.

In desktop you have 2 columns so it’s working fine but on mobile your grid changes to 1 columns but your first child is still spanned to 2 columns, so it is making whole grid 2 columns.

So only thing you have to do is make the first child span until mobile viewport only, on mobile it should not be spanning because it’s already 1 column.

Also you don’t have to write JS to apply CSS that way. You can just write CSS like below:

<style>
@media screen and (min-width: 768px) {
  .about_team_member:first-child {
    grid-column: 1 / span 2;
    margin: 0px auto;
  }
}
</style>

Put this code on your custom code block and remove that JS code.

I hope this helps.

3

Worked perfectly, thank you so much!

1 Like