Hi,
i am using the Smartr theme and it utilizes a row which has the following structure:
site origin hero –> hero frames –> 5 hero frames with 5 background images
the problem is that for the life of me i cannot figure out how to make the background images within the heroframes scale down in response to the window size. Basically when i look at it in mobile it is extremely zoomed in on one area.
i have tried following another thread from a year ago that had the same issue with the tesseract theme but i just cant get it to work.
all help is GREATLY appreciated!
-Branden
[email protected]
Hi Branden,
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Please note that if you’ve set a height for the hero widget you’ve greatly affected how responsive the hero widget can be. CSS background images must maintain the aspect ratio of the container its applied to – this cannot be disabled or avoided. Even if it means that the browser must clip the image to ensure this aspect ratio is maintained. When an aspect ratio isn’t set we try and workaround this “feature”.
This is a private message.
Hi Branden,
As mentioned, setting a height, let alone a very large height, will prevent the background images from being responsie due to the image having to maintain the aspect ratio of the container (which is 1055px). To avoid this CSS limitation, you should remove the height and rely on a percentage based padding amount. The SiteOrigin Hero widget will handle resizing the image on the fly to account for the padding.