[Grid] `.stackable` and regular grids have inconsistent margins on mobile screens

Grid and stackable grids don’t seems to have the same behavior on small screens:

@media only screen and (max-width: 767px) {
    .ui.grid {
        margin-left: -1rem !important;
        margin-right: -1rem !important;
    }
    .ui.stackable.grid {
        margin-left: 0rem !important;
        margin-right: 0rem !important;
    }
}

To mix .ui.grid and .ui.stackable.grid on the same page I have to fix this in grid.overrides:

@media only screen and (max-width: 767px) {
    .ui.grid {
        margin-left: 0rem !important;
        margin-right: 0rem !important;
    }
}

Have I missed something?

[hugopeek]

You’re not missing anything, I keep bumping into this one too. I ended up with the following fix, similar to yours:

.ui.grid.container > .column,
.ui.container .grid:not(.nested) > .column {
    @media only screen and (max-width: @largestMobileScreen) {
        padding-left: 0 !important;
        padding-right: 0 !important;

        // Nested stackable grids are negatively affected by this change
        .ui.stackable.grid {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }
}

It’s far from ideal, because it requires a custom .nested class to be assigned to all nested grids. I’m running into problems now because that class is not present in some scenarios, so I’m looking for a better fix.

Also, adding .relaxed classes to the affected grids will probably mess with this fix.

This issue seems to be related too: #4129

[dbendaou]

Hi, I have the same issue here, negative margin on mobile cause my layout to be scrollable even if there is nothing to scroll … 🐛

EDIT : it’s seems that if you add an <div class="ui container"> around the negative margin grid solve the issue. The scroll isn’t there anymore, but the negative margin does