Hi, I’m building a site using the North template (actually technically I’m editing the prebuilt Consultant website for my own purposes) and want to use the Hero widget at the top of the page. It’s important that the image resizes with the text in the image as I want users to be able to see the entire image regardless of what device they are using. Currently the text resizes and the sides of the image are cropped when viewing on a smaller screen. Can someone please help me work out how to achieve what I need? Many thanks, Stuart
Help needed with responsive images for Hero Widget
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Stuart,
To ensure setup is as easy as possible, we use background-size: cover; to allow for all images to fill the entire area of the hero widget. This prevents having to resize images manually. This functionality works 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 be problematic on mobile because if you use a height that’s too large, or add too much text it may result in parts of your image being hidden on mobile.
To lower the impact of the slides being clipped off, you should use an image with a central focus, which is an image where the focus of the image is in the middle (or at least towards the middle). Alternatively, you could apply a Responsive Height that works better for your image than the Height setting does. We’re unable to recommend a Responsive Height as it depends solely on the image you’re using so you’ll need to try a number of different values to see what works for you and your image.
Alternatively, if you would like more control over how your slider works on mobile, I would give Smart Slider 3 a try as it handles slides in a different manner.
Thanks Alex, I'll give that a go.
Hi Alex,
Thank you for the help you gave me a few days ago. I was able to configure the SmartSlider to do what I want and I’m pleased with the result :-)
However, now I have two further issues I wonder if you can help with please?
1. the slider looks great in desktop, however in tablet view the overlaid wording starts to become difficult to read and then in mobile view, it’s almost impossible to read, meanwhile my button remains the same size, which in mobile look enormous. how can I fix this?
2. I’m using a menu which overlaps the top of the slider image. Again in desktop view this looks really great :-) however in tablet view the menu starts to cover more of the image than I would like, and in mobile view it has coverd the image completely. how can I force the menu to move above the slider in mobile and tablet view only?
Many thanks, Stuart
Hi Stuart,
To resolve both issues you’ll need to adjust your sliders responsive controls until it appears as desired. In regards to 2, you’ll need to add spacing to the top of the slider to ensure the text doesn’t overlap.
I also recommend giving this checklist a quick read: 9-Point Checklist for Creating the Best Responsive Slider – Smart Slider 3
If you would like more help with doing this, please reach out to the developers of Smart Slider 3 directly.
This will require some custom CSS. I’d like to help you with this, but unfortunately, this is beyond the scope of the support we’re able to offer on our free forums. There is a fair amount of custom work involved.
We do offer this level of support to our premium users, so if you’d like to upgrade to SiteOrigin Premium, then I can help you over email support.
If you’d prefer not to upgrade to SiteOrigin Premium, then you can hire a WordPress developer from Codeable. They’ll charge you an hourly rate for any work done.
Will do, thanks for your swift reply.
Hi Stuart,
No problem! :)
Please be sure to post another thread if you have any other questions.