Filter buttons rendering different on tablet landscape

Design help Layout & Design
1

I have a filter section at the top of a page that shows previous projects and within the webflow designer all render correctly on preview at the various breakpoints, as well as on the live website, other than landscape on a tablet.

My understanding from feedback from Webflow directly is that the landscape tablet view is actually equal to the Desktop view, it and that it is considered desktop viewport if the tablet viewport in landscape is 1024px or higher.

The issue is the allignment of the text to selector, within the button itself. See screenshot:

IMG_D250DF77A10A-1
IMG_D250DF77A10A-11920×1334 120 KB

There is no issue in portrait as seen in this screenshot:

IMG_75E7AE4FA4F3-1
IMG_75E7AE4FA4F3-11640×2360 234 KB

Would anyone be able to assist and let me know what I am doing wrong or why this would be rendering incorrectly only in tablet landscape?

Have tried to find a solution on the university but struggling.

Thanks in advance!

Here is my site Read-Only: [LINK](Webflow - Rely on Fire Check)
(how to share your site Read-Only link)

2

Hi, it’s a Safari bug, on Chrome everything works fine
I think you need to force your .Client Checkbox Label to display block to avoid this problem on Safari.

3

Hi!
Thanks for coming back to me.
The browser in use was actually Chrome as in the screenshots above.

Any other ideas :)?

4

Did you test force .Client Checkbox Label to display block ? I think it’s solution, because your .w-form-label by default is set to display:inline-block

5

ThibautLegrand - thank you!
This has resolved it, great help :grinning:

1 Like