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.
Hi 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.