Greetings, this might actually be an issue with the Black Studio Visual Editor widget, but I’m starting here. We are working up a new home page, The background image inserted with the Visual editor using the Design sidebar does not reach full height, and none of the cheap tricks I’ve pulled in our child theme seem to fix it without breaking image scaling altogether. Also, when I resize the window and pull it across, it looks like the image replaces to a smaller size, then goes back up to the original (or close). I can see that resize images have been automagically generated in the uploads directly, but they aren’t rendering here. I’ve gone through my CSS looking for someplace where I may have messed it up, but I really don’t see it. The H1 and H2 title fonts don’t scale either. I get the feeling that I have made a teeny error someplace. As always, help/advice greatly appreciated.
-Steve
Pagebuilder background images not fully responsive
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].
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hey Steve
Good to hear from you. I’m sure we can get these challenges sorted out.
Backgrounds
I’d recommend removing the background the from the widget, try adding it to the row via Edit Row > Theme > Background Image, insert the URL there. We can help tweak from there.
Headings
Sorry, those won’t scale on their own. Right now Vantage isn’t doing that for responsive. To help things along, try adding something like the following:
@media (max-width: 680px) { .whatiswontok h1 { font-size: 1.6em; } }Let me know how that goes and what I missed if anything.
Excellent Andrew, the image now scales properly, but does not maintain it's aspect ratio at full width. I have some ways of hacking this of course, but I'd prefer to do what you recommend. No issues about the headline, I will take care of it.
I’m sure we’ll be handling this better in a future update, right now we unfortunately have a few clashes between old Vantage functionality for Page Builder and new Page Builder functionality. For now all I can think of is:
/* Page Builder */ .panel-row-style { background-size: cover; }Assuming you want a 100% width image.
Andrew, thanks again. I went with:
@media screen and (min-width:800px) { .panel-row-style { min-height: 400px; background-size: cover; }}This holds the image at full height until at smaller viewport sizes the text starts to stack and the background sizing works with the text height (we would not have had this issue if we'd had a longer title/tag). The image is "passable" for this 1200×400 image at 1980px viewport, we saved the image at a reasonably high quantization (quality) of 85, and got something we can live with at a still somewhat reasonable image download of 166Kb.
It's all about tradeoffs and compromises. Thanks for your help.
Nicely done. Sounds like a decent solution. Thanks for sharing :)
Chat soon.
Cheers.