CMS Development

christinacschne
Contributor

Media Query for Mobile

SOLVE

 

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

0 Upvotes
2 Accepted solutions
AntonB
Solution
Participant

Media Query for Mobile

SOLVE

Hi @christinacschne,

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

 

@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

 

@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

 

 

regards

Anton

 

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

 

View solution in original post

valerajoey
Solution
Participant | Platinum Partner
Participant | Platinum Partner

Media Query for Mobile

SOLVE

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.

View solution in original post

4 Replies 4
valerajoey
Solution
Participant | Platinum Partner
Participant | Platinum Partner

Media Query for Mobile

SOLVE

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.

christinacschne
Contributor

Media Query for Mobile

SOLVE

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

0 Upvotes
AntonB
Solution
Participant

Media Query for Mobile

SOLVE

Hi @christinacschne,

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

 

@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

 

@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

 

 

regards

Anton

 

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

 

christinacschne
Contributor

Media Query for Mobile

SOLVE

Thanks! 

0 Upvotes