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].
Hello, I really hope you can help me with a problem I’m having…
I have used the Livemesh Hero Header for a Vantage site I built, which is all fine, except when I add a custom Header to the cover image. Everything looks fine on a desktop and tablet, but the image doesn’t resize with the headline on mobiles. The image is severely cut off left and right sides. I’ve tried adjusting all available settings and even tried alternative Site Origin options to the Livemesh Hero Header.
Is there a way to fix this? Some CSS maybe?
As the site has just gone live, I’d appreciate a quick response.
Thx
Norm
Hi Norm,
I suspect this is due to settings. Basically, CSS background images (which is what the hero image is) need to maintain the height of the container it’s applied to. So if the padding of the hero widget is a consistent 400px across all devices the background image is going to need to clip the sides of the image off to ensure it’s able to maintain the padding of the container. Does this make sense? (I mean in the “I understand why this is happening” sense)
I would recommend taking a look over your Responsive settings.
If that doesn’t help, do you have a public URL where we can take a look at what’s going on?
By the way, as you’re a premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on your Page: Dashboard (please refer to the support tab). Please reference this thread and include your SiteOrigin order key in the email.
Hi Alex, thanks for getting back to me. I had already tried your suggestion but it didn’t work for me either.
The site has several pages that has the hero image and text on it that are the problem, but there’s one page that only has the hero image with no text. The page without the hero image works perfectly, so something is happening when text is added over the image.
As the site had already gone live with the problem at the time I posted the thread, I’ve since added the text to each image in photoshop and uploaded the combined image/text in place of the offending images. This has solved the problem, although not the best outcome for SEO purposes.
Thanks
Norm
Hi Norm,
Hm. Maybe try the SitOrigin Hero widget instead? We include FitText support which should avoid this whole situation as it’ll resize the text depending on available spacing. It doesn’t, however, include the responsive settings that Livemesh does so you’ll need to set it up with a mobile first mindset.
If that’s not an option, I would recommend contacting Livemesh to see if they have any ideas.