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, everything else looks beautiful and responsive on mobile except for the Hero image doesn’t resize on mobile. Is there something you can suggest to help this? www.guanabaraboards.com/school
Thank you!!
Hi Teresamgb,
It looks like you’ve set a height for your hero widget.
This is happening as this widget (as well as our other slider widget) have strong focuses on content rather than layout. Now for the layout slider, this might sound odd but the sizing of each slide is dictated by the contents of the layer. This means if an image says it needs 250px of height to display, it’ll get 250px of height unless there’s a height set, which is set the design and layout setting. In which case… well, basically the image will be cut off if it exceeds said height.
So to allow your layer to act like hero widget with a height set without setting a height, you’ll need to use a spacer. Please open the layout slider and add a text widget, this will be your spacer. Then open the text widget and head over to the widget styles. Open the attributes group and add mobile-hidden to the widget class. Then add your desired height (height: 500px; as an example) to the CSS styles field.
Then please navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Then add the following CSS:
@media (max-width: 768px){ .mobile-hidden { display: none; } }You might also need to install the SiteOrigin CSS Editor.
This CSS will hide whatever has had the mobile-hidden class set on mobile devices. If you feel it’s being hidden to soon please adjust the max-width (as in 768).
Hi Alex,
First off, thank you for your support. I’ve benefited from many of your threads.
For this specific issue, I’ve implemented the changes you note above and it has taken care of the truncated image height. However, the image is not scaling for screen width resulting in the edges of the image being cut off rather than the entire image shrinking to fit the screen.
Is there a way to correct this issue?
Thanks,
Marc
Hi Marc,
Thank you for the kind words! :)
CSS Responsive background images have a massive limitation in that they must retain the aspect ratio which heavily favors the vertical height. It’ll go so far as to “crop” the image by cropping the image horizontally. The only way to resolve this would be to lower the height of the hero widget. I don’t like this either but there’s sadly no way to avoid it – you’ve gotta resize it lower of keep the crop. Sorry mate. :(