Showing / hiding sections for mobile

[heatherwebdev]

I'm new to shadows and am used to bootstrap. I'm trying to get a section to hide when the screen is small, its hiding from about sizes 640px - 768px, but less than 640px, it shows again.

Here's the code for the 2 sections. the small section is fine, only showing when I need it to.

<div class="o-layout__item u-width-12-s u-width-12--l u-width-12--w u-text-center t-bg-blue t-font-white u-hidden--s u-shown--m u-shown--l">

</div>

<div class="o-layout__item u-width-12-s u-width-12--l u-width-12--w u-text-center t-bg-blue t-font-white u-shown--s u-hidden--m u-hidden--l">

</div>

[RTHOMASDESIGN]

You can just use "u-hidden" as the default.

For example:
o-layout__item u-width-12-s u-width-12--l u-width-12--w u-text-center t-bg-blue t-font-white u-hidden u-shown--m

Take a look at the sheets... They're pretty easy to understand. You don't need to target every breakpoint. in the case above, it'll show the element upon reaching the medium screen size and above, but will hide it otherwise. Hope this helps!

-Ryan

[Nick]

heatherwebdev Here is a link to the core.css file from Shadows which controls the layout of the framework.

https://github.com/mivaecommerce/shadows/blob/main/mmt/css/core.css

Here is a link where you will find the specific styling for small screens: https://github.com/mivaecommerce/sha...core.css#L2715

You should be able to analyze this CSS to get what you need.