When I add content to mobile view it automatically adds it to the desktop break point. The content needs to only display in mobile. How do I do this? I have tried to create a class to hide content, but if I try to hide anything on the desktop break point it literally hides it on everything I need it on mobile.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi @MOpingpong,
Please post your read-only link so we can look into this issue!
You should be able to set the element to display: none in desktop breakpoint and then display: block/flex etc. in mobile breakpoint - this will override the inheritance!
There’s a helpful guide here:
Thanks!
Hey James,
The breakpoints describe cascading formatting rules only, they do not define what content exists in which views.
To make something appear only in mobile view, you’d simply create it, then go to your primary desktop breakpoint ( with the asterisk * ), and mark it as hidden. This will hide any element with that class at the desktop breakpoint level, and cascade through the breakpoint both up ( larger screen sizes ) and down ( tablet, landscape, portrait ).
Then, where you want to change that rule, let’s say mobile-landscape, switch to that breakpoint and change the style to e.g. display: block. That will cascade down to portrait, so you’d have;
My preferred way to use this is to create a dedicated class called Mobile Only with the above configuration, and another one, Desktop Only which only displays on non-mobile breakpoints, say tablet and above.
Any time you want this breakpoint-specific visibility, just wrap those items in a div and give them the class you want to govern that.
Thank You, what you said helped me figure it out. Next time I will post my read-only link.