Good day
I hope this message finds you well and I hope someone can help me.
May you please kindly advise how I can make my background image on SiteOrigin Hero Widget mobile responsive?
I’ve tried adding different CSS under Row Style/Attributes/CSS Mobile Declaration but nothing is happening. My website is built with WordPress Advanced Twenty Seventeen child theme.
And I am starting to thinking that I may be doing something wrong.
Here is an image for ease of reference https://drive.google.com/file/d/1Qjmr6cO8l4eWzUwvy2twRYAJ89GpyBR4/view?usp=sharing
The website page is https://www.blvckuniverse.co.za/impart
Kind regards
David
Hi David,
The Hero widget uses CSS to display images, and that allows you to easily add elements on top of widgets. Browsers handle backgrounds by ensuring the image is always the same height of the area/slide its been applied to and to ensure this, the browser can (and will) clip the sides of the image off. This can’t be avoided, but you can lower the impact by setting a Responsive Height or by using responsive units of measurements.
For the former, you could apply a Responsive Height that works better for your image than the Height setting does. This setting is below the Height setting in the Hero Design and layout settings group.
For the latter, I recommend using vh to set a height that scales based on the viewport height. For example, try 25vh and that’ll be 25% of the height of the browser.
Another option would be to switch to the SiteOrigin Slider widget or SiteOrigin Image widget. You won’t be able to put a button on top of the widget, but the image displays using HTML so the image scales without any interaction and won’t be clipped by the browser.
Kind regards,
Alex
Hey Alex!!!
Thank you very much man. It was right under my nose. It works! I just need to figure out how to reposition the button. :-) You are a rockstar!
The button is well aligned, It looks great. Thanks once again Alex!!!
Hi David,
Great to hear that helped! :)
Please feel free to open a new thread if anything else comes up and we’ll lend a hand. Have a good one mate.
Kind regards,
Alex