# hide/show module on mobile

**URL:** <https://community.hubspot.com/t/hide-show-module-on-mobile/35799>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [April 20, 2021, 3:03pm UTC](https://community.hubspot.com/t/hide-show-module-on-mobile/35799 "2021-04-20T15:03:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![MNault](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mnault/32/9134_2.png) [@MNault](https://community.hubspot.com/u/MNault)\
**Post date:** [April 20, 2021, 3:03pm UTC](https://community.hubspot.com/t/hide-show-module-on-mobile/35799/1 "2021-04-20T15:03:09Z")

</div>

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](https://info.greystonecc.com/-temporary-slug-7b575b82-ecfa-4d5b-82b5-dd55f9269a10?hs_preview=HVagNpEE-45453412097)

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [April 20, 2021, 3:07pm UTC](https://community.hubspot.com/t/hide-show-module-on-mobile/35799/2 "2021-04-20T15:07:54Z")

</div>

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

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

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

```

---

<div class="post-metadata">

**Author:** ![MNault](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mnault/32/9134_2.png) [@MNault](https://community.hubspot.com/u/MNault)\
**Post date:** [April 20, 2021, 3:15pm UTC](https://community.hubspot.com/t/hide-show-module-on-mobile/35799/3 "2021-04-20T15:15:36Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/a/9ae8cc10a4985cb8d7b0249191dc37e7465c7258.png)

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [April 20, 2021, 3:22pm UTC](https://community.hubspot.com/t/hide-show-module-on-mobile/35799/4 "2021-04-20T15:22:40Z")

</div>

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

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

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

```