Hi :),
I’m currently working on a new website for the company I’m working for. We are currently struggling with the resizement of images in the hero-slider widget. Are there any dependencys that we have to take care of, in order to make the responsive-functionality of the widget work as intended?
I had to add id’s to the buttons, so I could place them in the right spots of the slides. does this affect the overall function of the widget?
Hi Benjamin,
To ensure setup is as easy as possible with the SiteOrigin Hero widget, we use background-size: cover; to allow for all images to fill the entire area of the hero widget as 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.
This is unavoidable, but you can 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, give Smart Slider 3 a try as it handles slides in a different manner.