Hi there,
Is there a way to have something like this with the tabs container ?
or maybe it’s a feature requests
2 on top and 3 beneath, but it’s all the same tab menu?
If you just want 3-wide with wrapped tab buttons, try this:
[role="tablist"][data-orientation="horizontal"] {
display: flex !important;
flex-wrap: wrap !important;
height: auto !important;
gap: 0px !important;
}
[role="tablist"] [role="tab"] {
flex: 0 0 33.33% !important;
min-width: 33.33% !important;
max-width: 33.33% !important;
box-sizing: border-box !important;
padding: 8px 4px !important;
}
[role="tab"] span {
font-size: 0.8rem !important;
text-align: center !important;
}
End result:
Note: this only works for mobile tabs. This CSS will mess up desktop tabs, so you’ll want to create two tab containers…one for mobile with this styling and one for desktop (no custom css style) with visibility conditions set to screen small and screen large respectively.
Just adding an alternative approach that works well on mobile.
Glide already provides the .mobile-layer class for mobile views, so you can simply use it to scope responsive CSS.
/* Target mobile only */
.mobile-layer [role="tablist"] {
flex-wrap: wrap;
}
/* Default: 3 tabs per row */
.mobile-layer [role="tablist"] > button {
flex: 1 1 30%;
}
/* First row: 2 tabs */
.mobile-layer [role="tablist"] > button:nth-child(-n+2) {
flex: 1 1 48%;
}
This produces a 2 / 3 layout on mobile while keeping the default behavior elsewhere.
It probably works responsively in the actual published app, not the editor.
I can’t tell you because I have to pay to publish the app 
