# Media Query for Mobile

**URL:** <https://community.hubspot.com/t/media-query-for-mobile/10858>\
**Category:** CMS Development\
**Created:** [November 8, 2018, 3:11pm UTC](https://community.hubspot.com/t/media-query-for-mobile/10858 "2018-11-08T15:11:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![christinacschne](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/christinacschne/32/98942_2.png) [@christinacschne](https://community.hubspot.com/u/christinacschne)\
**Post date:** [November 8, 2018, 3:11pm UTC](https://community.hubspot.com/t/media-query-for-mobile/10858/1 "2018-11-08T15:11:58Z")

</div>

Hello.

I’m trying to setup a media query to hide the small mobile friendly image (below the shop now) until the page is on a mobile device. Any thoughts?

[https://info.comporium.com/-temporary-slug-8ce16fa4-38a9-441f-974d-e496f46d70a3?hs\_preview=yvIVMKRn-6477245208](https://info.comporium.com/-temporary-slug-8ce16fa4-38a9-441f-974d-e496f46d70a3?hs_preview=yvIVMKRn-6477245208)

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [November 8, 2018, 4:29pm UTC](https://community.hubspot.com/t/media-query-for-mobile/10858/2 "2018-11-08T16:29:29Z")

</div>

Hi @christinacschne,

it’s pretty simple. If your object has a Class or an ID you can hide it with following solution:

```auto
@media screen and (max-width:XXX px){
.your-class{
display:none;}
}
@media screen and (max-width:XXX+1 px){
.your-class{
display:block;}
}

```

For example:

if you want to hide your element on smartphones(most likely 480px width;iPhones have different/other resolutions) your code should look like this

```auto
@media screen and (max-width:480px){
.your-class{
display:none;}
}
@media screen and (max-width:481 px){
.your-class{
display:block;}
}

```

You can find a list of media queries [here](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)

regards

Anton

| ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/1/71232bb65bd029237c40010174d30ea2bb57cbd6.png) | Did my post help answer your query? Help the Community by marking it as a solution |  
| — | — |

---

<div class="post-metadata">

**Author:** ![christinacschne](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/christinacschne/32/98942_2.png) [@christinacschne](https://community.hubspot.com/u/christinacschne)\
**Post date:** [November 12, 2018, 2:55pm UTC](https://community.hubspot.com/t/media-query-for-mobile/10858/3 "2018-11-12T14:55:22Z")

</div>

Thanks!

---

<div class="post-metadata">

**Author:** ![valerajoey](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/valerajoey/32/35482_2.png) [@valerajoey](https://community.hubspot.com/u/valerajoey)\
**Post date:** [November 9, 2018, 1:06am UTC](https://community.hubspot.com/t/media-query-for-mobile/10858/4 "2018-11-09T01:06:23Z")

</div>

hey there I’ve just visited your site, you have a quite a unique site here, a site which consists mostly of an image, here’s a tip I can give you, to minimize your work doing this thing, If you’re using a rich text field you can just use SMART content to change the your content based on 3 resolution (desktop , tablet , mobile) I just don’t know what the specific resolution tho. but you can still use media query CSS rules to override something.  
happy coding.

---

<div class="post-metadata">

**Author:** ![christinacschne](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/christinacschne/32/98942_2.png) [@christinacschne](https://community.hubspot.com/u/christinacschne)\
**Post date:** [November 12, 2018, 2:51pm UTC](https://community.hubspot.com/t/media-query-for-mobile/10858/5 "2018-11-12T14:51:51Z")

</div>

Thanks! I appreciate your feedback and sharing the SMART content fix!