hide/show module on mobile

Developer Support CMS Development
1

Hello! I have a landing page that displays an embedded Adobe Online Publication. I have created a pub version for both wide screen and mobile screen viewing and have embedded them on the page. I would like to have the “widescreen” version show when the media is 601px or more. I would like to have the “mobilescreen” version show when the media is 600px or less. https://info.greystonecc.com/-temporary-slug-7b575b82-ecfa-4d5b-82b5-dd55f9269a10?hs_preview=HVagNpEE-45453412097

2

@MNault You can add the following media queries either to the template’s stylesheet, the template <head>, or in the additional head markup of the page’s settings.

<style>
 @media (min-width: 601px) {
 .mobilescreen {
 display: none;
 }
 }

 @media (max-width: 600px) {
 .widescreen {
 display: none;
 }
 }
</style>
3

I dropped it into the page settings HEAD and it did not work when I checked it on my phone. So I dropped it into the template HEAD markup and still nothing. I must be doing something wrong. Just to confirm, I have given the Rich Text modules the class of “widescreen” and “mobilescreen” like image. Is this correct?

41220i70BB13D19E5FB1BE.png
41220i70BB13D19E5FB1BE.png400×359 36.8 KB

4

@MNault Try either putting them each in a group wrapper with their classes on it or add !important to the styles cause looks like there’s a display: block on the widget-span class that’s overwritting the media queries.

<style>
 @media (min-width: 601px) {
 .mobilescreen {
 display: none !important;
 }
 }

 @media (max-width: 600px) {
 .widescreen {
 display: none !important;
 }
 }
</style>