Hide Background Image Visibility on Mobile and Handheld Devices – Themeco Community

Hide Background Image Visibility on Mobile and Handheld Devices

The Man — Tue, 30 Jun 2015 07:12:11 +0000

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!

Reply To: Hide Background Image Visibility on Mobile and Handheld Devices

The Man — Tue, 30 Jun 2015 07:12:55 +0000

This reply has been marked as private.

Reply To: Hide Background Image Visibility on Mobile and Handheld Devices

Christopher — Tue, 30 Jun 2015 10:47:55 +0000

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.

Reply To: Hide Background Image Visibility on Mobile and Handheld Devices

The Man — Wed, 01 Jul 2015 01:46:59 +0000

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

Reply To: Hide Background Image Visibility on Mobile and Handheld Devices

The Man — Wed, 01 Jul 2015 01:50:10 +0000

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

Reply To: Hide Background Image Visibility on Mobile and Handheld Devices

Paul R — Wed, 01 Jul 2015 08:12:51 +0000

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.

Reply To: Hide Background Image Visibility on Mobile and Handheld Devices

The Man — Wed, 01 Jul 2015 21:07:12 +0000

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!

Reply To: Hide Background Image Visibility on Mobile and Handheld Devices

The Man — Wed, 01 Jul 2015 21:12:16 +0000

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!

Reply To: Hide Background Image Visibility on Mobile and Handheld Devices

Lely — Thu, 02 Jul 2015 03:15:37 +0000

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.