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 there,
How can I make the full size background images for rows responsive?
Thanks.
Hi Redline
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.
Hi Andrew,
Here you go…..http://pizzamos.com/about/
Thankyou!!
Thanks. There isn’t really any easy way forward that I can see. Your BG images are covering for the most part. The only other way to go from there is to change background-size: cover; to background-size: 100;. However, that introduces another challenge. Once you change cover to 100%, your images will shrink in height in order to fit the entire image in the viewport. But…the height of the row and the text isn’t responsive, so you’ll have only a portion of your row with a background image on mobile.
If you have a look at the way Meta Slider plugin handles responsive, the entire slider including text shrinks, as does the container. At the moment, this isn’t the way Page Builder rows and row backgrounds function. In in a month or so we’ll be launching a SiteOrigin Layered Slider widget that will do what Meta Slider does but for now we don’t have a fully responsive row background + text solution.
Summary: It’s easy to make the row background fully responsive but that doesn’t help the page as it stands because the row height and the row text static, the width changes for sure but not the height and text size.