Hi
I have set an image in your Hero Widget with an image 1160×350 but cannot get it to fit, it appears chopped off.
I have tried many of the settings in the widget, but these do not seem to make it responsive even with the height setting which did adjust the size/fit issue it was still not responsive.
Have I missed a setting that makes the item fit the space and is responsive?
Barry
Hi Barry,
This typically happens due to using a height or padding that that is very large. Basically, responsive CSS backgrounds must maintain an aspect ratio and as a result of this it’ll clip to maintain the aspect ratio.
If removing your height and/or lowering your padding doesn’t help, do you have a public URL where we can take a look at your setup?
Hi Alex
Thanks for taking a look at this.
I have inspected the code and I cant find any padding that is interfering.
Page with the problem.
Regards Barry
Hi Barry,
Thank you for the link. Okay, so your issue is purely an image problem. Basically, the aspect ratio is too width focused and as a result, the browser has no real room to do anything other than clip the sides of the image – your image is wider than the page itself.
The only way around this issue is to either switch to a different image (something with less overall width and more height is ideal), or to remove elements of the hero widget so that it’s able to become even smaller than it currently is. To clarify, the hero widget would need to be 87px of total height to appear without any clipping by the browser.
Another option would be to move the text to a dedicated SiteOrigin Image widget which uses HTML images which don’t need to maintain an aspect ratio. The only downside to this is that you won’t be able to layer the text on top of it.
Sorry mate. :(
Hi Alex
Cheers.
Still slightly confused I can create an image of any size what image size would you suggest would be best.
Regards Barry
Hi Barr,
To be honest, there’s no recommended set image size. I would recommend trying a bunch of different images and seeing how they look when resized. I would recommend trying a 16:9 image however as they typically work really well.
Hi Alex
I have now tried several sizes and they all still crop I am currently on 960×540.
I have either adjusted something I should not have or am missing something.
Regards Barry
Hi Alex
In looking at more threads on the forum I can see several people have struggled with the issue.
In some of those threads a mention is made of a layered slider widget, is that due to, be released soon.
Regards Barry
Hi Barry,
Okay so for that image size your hero widget needs to be no more than 160px in height (effectively double what it was). You can get close to 160 (168px) if you set the hero widget padding settings to 0. This will however look a tad weird on desktop so consider trying a percentage based padding to see if that will allow you to add some height on desktop while retaining the low amount on mobile.
The Layout slider was actually released a while ago. It’s basically exactly the same (as in, the CSS background aspect ratio requirement is a general thing – it’s not just specific to the hero widget) as the Hero widget expect that it allows widgets instead of just text. To activate it, please navigate to WP AdminPluginsSiteOrigin Widgets and activate the Layout Slider.