Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi guys,
Quick question re: Hero Image widget.
As far as I am aware, this widget is not built to be responsive to mobile screens.
However, is there anything I can do to at least adjust the text size in mobile mode, so it doesn’t run off the edge of my banners?
Thank you!
Hi PSBakh,
The hero widget is responsive, but only as responsive as automation will allow us. We’re able to further refine the responsiveness of a hero widget. If you would like my help with this could you please provide me with a link to the hero widget you’re having issues with? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
The best thing you can do for automated responsiveness is to remove any height you’ve set in the widget, use little padding and use the themes font sizes rather than a custom one (your theme will handle making the text responsive).
Hi Alex,
Thanks for your reply. The site im working on is currently down for maintenance, can I create a temporary user for you to be able to have a look?
This is a private message.
This is a private message.
Hi Alex,
Just set up a temporary user for you.
The hero slider on the homepage is the one I am having most issues with.
Thank you for your help!
Preface: This CSS was written for PSBakh. It will not work on any other site but his. I’ve made this response public for reference – nothing more.
Hi PSBakh,
If you navigate to WP AdminAppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS before any other CSS related to the homepage widget in your CSS. (specifically in the /*Homepage Hero text*/ section)
@media (max-width: 810px){ .homepage-hero h1 { font-size: 40px !important; } .homepage-hero h3 { font-size: 25px !important; } .homepage-hero .so-widget-sow-button { margin-top: 5px !important; } } @media (max-width: 600px){ .homepage-hero .sow-slider-image-wrapper { margin: 0 !important; } .homepage-hero .sow-slider-image, .homepage-hero .sow-slider-image-wrapper { height: 400px !important; } }You might also need to install the SiteOrigin CSS Editor.
Amazing! Works perfectly. Thank you so much for your help, Alex!