# Display a section on Mobile

**URL:** <https://community.hubspot.com/t/display-a-section-on-mobile/4578>\
**Category:** CMS Development\
**Created:** [December 19, 2017, 10:28pm UTC](https://community.hubspot.com/t/display-a-section-on-mobile/4578 "2017-12-19T22:28:38Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Juan\_Garza](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/juan_garza/32/84083_2.png) [@Juan\_Garza](https://community.hubspot.com/u/Juan_Garza)\
**Post date:** [December 19, 2017, 10:28pm UTC](https://community.hubspot.com/t/display-a-section-on-mobile/4578/1 "2017-12-19T22:28:38Z")

</div>

Hi.

I have been having some trouble in order to hide sections of a template in the mobile version I was able to do so in a tablet but when it comes to a smartphone it is not hiding the section.

PD: this is the code i’m using in order to do so:

@media (max-width:478px){

.content\_\_show{  
display:none !important;  
}

}

anyone can help me out in order to figure out how does Hubspot manages information when is on mobile screens, especially on smartphones?

---

<div class="post-metadata">

**Author:** ![Juan\_Garza](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/juan_garza/32/84083_2.png) [@Juan\_Garza](https://community.hubspot.com/u/Juan_Garza)\
**Post date:** [December 19, 2017, 11:04pm UTC](https://community.hubspot.com/t/display-a-section-on-mobile/4578/2 "2017-12-19T23:04:50Z")

</div>

By the way i’m also needing some stuff to be shown on mobile and not on desktop and its giving me the same issue

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [December 20, 2017, 5:41am UTC](https://community.hubspot.com/t/display-a-section-on-mobile/4578/3 "2017-12-20T05:41:56Z")

</div>

Hi [@Juan\_Garza](https://community.hubspot.com/t5/user/viewprofilepage/user-id/23525),

Your code is right with mobile but there is more CSS code with some parent class targeting.

Can you please send page link so I can tell you what’s a real problem?

**Team TRooInbound.**

---

<div class="post-metadata">

**Author:** ![Juan\_Garza](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/juan_garza/32/84083_2.png) [@Juan\_Garza](https://community.hubspot.com/u/Juan_Garza)\
**Post date:** [December 20, 2017, 2:29pm UTC](https://community.hubspot.com/t/display-a-section-on-mobile/4578/4 "2017-12-20T14:29:05Z")

</div>

[http://www-vantech-com-co.sandbox.hs-sites.com/home-2017?hs\_preview=GPMNfLBk-5400611112](http://www-vantech-com-co.sandbox.hs-sites.com/home-2017?hs_preview=GPMNfLBk-5400611112)

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [December 20, 2017, 5:26pm UTC](https://community.hubspot.com/t/display-a-section-on-mobile/4578/5 "2017-12-20T17:26:05Z")

</div>

Hi [@Juan\_Garza](https://community.hubspot.com/t5/user/viewprofilepage/user-id/23525),

I have found some media query on your page like,

```auto
@media (max-width: 1139px) and (min-width: 768px)
 .content__show {
 display: none !important;
 }}

```

so it’s work in between screen size 1139px and 768px and display:none your content and again show in 0px to 767px screen size.

So if you want to hide it in all 0 to 767px screen size

write this code in your CSS stylesheet

```auto
@media (max-width: 767px) {
 .content__show {
 display: none !important;
 }
}

```

hope this works, let me know if not working

Did my post help answer your query? Help the Community **by marking it as a solution.**

**Team TRooInbound**

---

<div class="post-metadata">

**Author:** ![Juan\_Garza](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/juan_garza/32/84083_2.png) [@Juan\_Garza](https://community.hubspot.com/u/Juan_Garza)\
**Post date:** [December 20, 2017, 6:22pm UTC](https://community.hubspot.com/t/display-a-section-on-mobile/4578/6 "2017-12-20T18:22:54Z")

</div>

I have already tried also to do so the way you told mee, but i only need to be hidden for screens lower than 480

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [December 20, 2017, 7:08pm UTC](https://community.hubspot.com/t/display-a-section-on-mobile/4578/7 "2017-12-20T19:08:39Z")

</div>

Hi [@Juan\_Garza](https://community.hubspot.com/t5/user/viewprofilepage/user-id/23525),

I think you did it with my instruction and want to hidden section in below section just remove other unwanted media queries and add below CSS syntax to

```auto
.content__show {
 display: block !important;
 }

@media (max-width: 480px) {
 .content__show {
 display: none !important;
 }
}

```

Hope this work!

Please mark this as solution if this right solution

Team TRooInbound

---

<div class="post-metadata">

**Author:** ![fdido](https://avatars.discourse-cdn.com/v4/letter/f/ba9def/32.png) [@fdido](https://community.hubspot.com/u/fdido)\
**Post date:** [May 2, 2022, 9:23am UTC](https://community.hubspot.com/t/display-a-section-on-mobile/4578/8 "2022-05-02T09:23:55Z")

</div>

Really!? from the script? Genius! (pls insert sarcasm)

---

<div class="post-metadata">

**Author:** ![Juan\_Garza](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/juan_garza/32/84083_2.png) [@Juan\_Garza](https://community.hubspot.com/u/Juan_Garza)\
**Post date:** [December 21, 2017, 8:13pm UTC](https://community.hubspot.com/t/display-a-section-on-mobile/4578/9 "2017-12-21T20:13:44Z")

</div>

HI, I have another question in regards this, now on the desktop is showing up an empty space where the content should be hidden.

Any advice on this?