Semantic-ui: [Grid] `.stackable` and regular grids have inconsistent margins on mobile screens

[yamsellem]

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?

[awgv]

I wonder why this was done, seems to be a purely aesthetic choice.

[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

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[ghost]

+1

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[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