You offered some excellent support for a similar question here: https://siteorigin.com/thread/page-builder-background-image-wont-rescale-for-mobile-devices/
However that response was very specific to that person’s situation, with CSS code, etc.
My situation is this. I have a Hero widget background image that is composed so that I am in the photo to the right of the text (That is just how the photo was shot). It looks great on a desktop or tablet, but when I view on mobile, the photo is cropped on both sides, showing a very uninteresting part of the photo.
Visual Composer has the ability to specify “When the device is Mobile, do this. When the device is a Tablet, do that. When the device is a desktop, do the other” and so on.
Does PageBuilder have a similar feature so that I can specify a different hero image based on the width of the screen. Or better yet (and more simply), can I just specify a different hero widget based on the device type?
There are standalone plugins that can do this, and as good as PageBuilder is at being responsive, I would think it would have this adaptive ability as well.
Here is the URL of the page: www.MarkWidawer.com
I am using the Woo Canvas Theme.
Thank you.
-Mark
p.s. I just purchased the premium upgrade specifically so I can get faster support on this issue, but when I logged out and back in after purchasing via Paypal, the free forum was still the only support option available to me. Please let me know how I can get premium support. -M
Hi M,
Sorry for the delay. Premium support is done through email at [email protected]. Forum support remains as is for the most part – we can’t really see who’s premium.
Basically, we don’t. Your best bet would be to use custom CSS like in the reference thread or to use a plugin that allows for visibility (ie. hide X widget on mobile and instead show Y). For this, we recommend Widgets for SiteOrigin which has an excellent visibility functionality, or media queries (find below).
Here are the aforementioned media queries:
@media (max-width: 550px){ .hide-mobile { display: none; } } @media (max-width: 1024px){ .hide-tablet{ display: none; } } .show-mobile, .show-tablet { display: none; } @media (max-width: 550px){ .show-mobile { display: none; } } @media (max-width: 1024px){ .show-tablet { display: none; } }Simply add the relevant class to the row (or widget) and it’ll hide the fields when desired.
—
How would you like to proceed?