[The ManParticipant]

Hi There,

I am sorry because I believe this question has already been asked; however, every custom CSS code I have seen as a solution has not worked with my site.

Could you please let me know how to hide the rotating background images on my site when viewed on mobile devices? I will post the site address in a hidden message after this.

Also, if it is possible I would like to be able to have different rotating images for mobile portrait view than for desktop or other devices. Please let me know if and how this can be done. I would either want to hide the current background images completely when viewed on mobile devices or have different images for portrait view only.

Additionally (to sound more complicated), is there a way to only hide the current background images when in a mobile portrait view but not in landscape view? The current background images look good when using a mobile device in landscape but not in portrait. If this is possible, can content band visibility be adjusted to only display in mobile portrait view?

I hope this is all clear and thank you!

[The ManParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

You can hide it for mobile devices but you can’t add a new background slider for mobile devices, however it could be possible with custom development but it would be outside the scope of our support.

Please add the following code in Customize -> Custom -> CSS :

@media only screen and (max-width : 320px){
.backstretch{
display:none;
}
}

Hope that helps.

[The ManParticipant]

Hi There,

Thank you for the quick response. That is the same CSS I have tried but when I go on the site on my android the background slider and images are still there. Is there something I am missing? I currently have that CSS on the customizer but it is not hiding the background.

Thank you

[The ManParticipant]

Is there a way to hide the images based on the fact that it’s a mobile phone and not by the resolution, similar to the visibility shortcodes? I think the issue here is that some phones have quite high screen resolution nowadays.

Thank you

[Paul RModerator]

Hi,

Visibility shortcode are also using media queries.

You can try adding the code below instead.

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

You may change 480px to adjust for when your background will disappear.

Hope that helps.

[The ManParticipant]

That is great, thank you! It took a bit of adjusting to figure out the right px but I got it. Thanks again for your help!

[The ManParticipant]

Sorry! one other question. Is there a way to change the px parameters for what is considered a mobile device? I would like it so that when an ipad is in portrait mode that it is considered a mobile device so that I can choose properly formatted pictures and have a slider that is only visible when the ipad is in portrait mode.

Thanks again for your time!

[LelyModerator]

Hello There,

Please use the following to detect IPAD in portrait mode:

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
   /*CSS goes here*/
}

You can refer to this link for other specific media queries:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Hope this helps.

[Author]

Posts