Hey Kurt,
Thanks for posting!
I believe you also submitted a ticket for the same issue which our colleague answered? Is it fine if we close this one out? 🙂
Ben
Danny has been great but this is a separate question. I feel I’ve bothered him enough (LOL)
Is it possible to make sure the photo widget is only visible when someone is on a desktop/laptop/imac? and not on an ipad,iphone,android.
My issue right now is it shows on my bosses ipad pro 10 inch screen and my old ipad when I turn the screen sideways(Landscape)
Gotcha! Our responsive breakpoints work by checking the width of the device the viewer is using. We don’t have a granular control as to which devices the elements show. You can set each responsive breakpoints under Tools > Global Settings > Responsive Layout.
By default, the medium device breakpoint is at 992px. Anything larger than that would be considered a large device. An iPad on landscape mode would have a width of 1024px which would explain why the images show up. The new iPad pro has an insane resolution of 2048×1536 which is considered as a large device no matter the orientation.
You may want to look for a more robust way of checking what device the site is being viewed on. I did a quick search online and found the SO entry below. It may help you get started. 🙂
http://stackoverflow.com/questions/18045660/hiding-elements-for-ios-android-based-on-useragent
Hope this helps! 🙂
Ben
Great Ben thank you,
Where and how would I assign
“<script type=”text/javascript”>
jQuery(document).ready(function ($){
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/i)) {
$(‘.download’).hide();
$(‘.rss’).hide();
};
if (navigator.userAgent.match(/Android/i)){
$(‘.itunes’).hide();
};
});
</script>”
To the current button
Wine-guides.co home page on the footer the middle button with the WG logo
Hey Kurt,
Just letting you know this is already beyond our scope of support as it already involves custom coding, and a complex one at that. 🙂
That script, if I’m not mistaken, simply checks what device the site is being viewed on, then hides certain elements. The first condition hides all elements with the class download and rss when on an iPod, iPhone, or iPad. The second hides all elements with the class itunes when on an Android device.
You can add custom classes to your modules under Advanced > CSS Selectors > Class. You can add custom JS scripts under Tools > Layout CSS/JS > JS. You’ll have to get rid of the script tags though, as those are added automatically.
You can add a custom class of ios-only to modules you want to show on iOS devices, and android-only for Android only modules. Then change the download and itunes classes on the script to match what you want.
Hope this helps! 🙂
Ben
Thank you Ben.
Here’s what I have set up
jQuery(document).ready(function ($){
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/i)) {
$(‘.Android’).hide();
$(‘.Rabbit’).hide();
$(‘.Carpet’).hide();
};
if (navigator.userAgent.match(/Android/i)){
$(‘.Apple’).hide();
$(‘.Rabbit’).hide();
$(‘.Carpet’).hide();
};
});
Sadly beaverbuilder doesn’t seem to support it, I get a never ending loading screen when i try to save it.
I understand I am going pretty far out of the reach of your support. you guys have been great. Apologies
Hey Kurt,
I just tried your code on my local environment(copied and pasted) and it works fine. Where did you place it?
Ben
Hi Ben, I select page builder. click on tools then select css/java, and put it into the javascript section. hit save and i get the blue progress bar. Ive waited 10 minutes now and its still “loading”
Doh’ Looks like two semi colons were the culprit. Sorry Ben, I will mark this as resolved
Cool! And thanks for taking the time to inform us. 🙂
Have fun with BB!
