Hello,
I am using the SiteOrigin page builder and the SiteOrigin Hero Widget for my home page http://www.bindukodwaney.photos/
The size of the hero image is too big for my liking. I would like to reduce it. I read through forums and tried suggestions from others and setting a height under “Design and Layout” of the widget but am not able to reduce the size.
Can someone please help.
Hi Reachbgk,
The large height of the Hero widget is due to the padding you’ve added to the Hero widget. Please open the relevant hero widget and open the Design and Layout settings group and either remove the Top and Bottom padding or change the padding to an amount that will change depending on the resolution – such as % or vh based.
Thank you for the suggestion Alex. I tried removing the top and bottom padding as suggested but that crops the image. I want to show the full image but just smaller. I also tried playing around with % and vh but all crop the image.
Hi Reachbgk,
Upon further inspection, due to the very square nature of the aspect ratio and the very large size, there’s no reliable method of doing this with our widget due to it relying on CSS Background images. Your only option is to add the text (and button) to the image itself or to find a slider that uses HTML images rather than CSS background images.
To clarify, CSS backgrounds must maintain the height of the area they’re applied too and the browser will go so far as to crop the sides of the image to ensure this. As a result, this makes fitting your image (with the low aspect ratio and large nature) and the content setup (a large amount of spacing) sadly not possible.
Sorry mate. :(