Mobile CSS Weirdness HELP!

Custom CSS is not being applied to an element the same way in portrait mode as it is in landscape mode. In portrait mode, the span class is “x-text-content-text-primary”

In landscape mode the correct custom CSS span class is applied, “home-header-mobile”

This is making it hella hard (impossible) to make the site display correctly on various devices.

And it doesn’t seem to be the CSS, it’s something in the Pro editor?

Hi @diamondheart,

Thank you for writing in, that is two different text element, notice on your screenshot the text with class home-header-mobile is e618-4, and another text element which is below that is e618-5. Please apply your class to both text element.

Hope it helps,
Cheers!

It’s the same text element in the Pro editor. There are not 2 text elements in that section, just one!

In that case, please provide us login credentials in a secure note so we can take a closer look.

Thanks,

Sent you a secure note. Just realized this is a Headline element, not a Text element. But the CSS class still shouldn’t be changing.

Hello @diamondheart,

The headline element will only display in the larger screens because it is being hidden to smaller screens.

In this setting, any custom css related to home-header-mobile class will only take effect in screens smaller than 768 pixels. Some devices which have greater pixels in landscape mode will not display this element. Disable the Hide During Breakpoint option and you’ll see the difference.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.