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.
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.