Page Builder 
Widgets Bundle 
SiteOrigin CSS 
Installer SiteOrigin Hero Widget – Background Image Alignment
Is there a way to align the background image in the SiteOrigin Hero widget to be aligned to Top?
I think it is currently aligned to “middle” and is causing the top of my image to get cut off due to resizing the browser. Normally I wouldn’t care but it is a portrait and the head keeps getting cut off.
I tried adding CSS stating {vertical-align: top;} but I’m pretty sure I’m not using the CSS attributes correctly.
This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
Replies
3Hi Jared,
This should be possible. Do you have a public URL where we can take a look at your setup?
I think I fixed it with some CSS adjustments – but right now the text and buttons on the screen aren’t acting responsively like the image. On mobile the header text was not sizing and the buttons move off the hero image and disappear against the white background.
http://www.jaredisham.com
Hi Jared,
It looks like you’ve resolved the header resize issue by enabling FitText in the Hero widget settings – consider increasing the FitText Compressor setting if you would like for everything to appear on a single line, try setting it to 1.25.
Regarding the buttons, that’s due to Top and Bottom padding you’re using – 300px is a lot and on mobile, it’s slightly too much. Please open your Hero widget and open the Design and Layout settings group. Set the Top and Bottom padding to 0%. Set the Extra Top Padding to 20.3%. How does that look?
You could also use a viewport for the padding amount, but that’s a tad tricky if you don’t set a Height.
Replies on this thread are closed.
Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.