Hi.
I am trying to make the Hero Image on my website responsive. I see that I can set a Responsive Breakpoint for it, but I don’t know how to set separate images for Laptop and Mobile devices.
Could you help me with the CSS code to do that?
Thanks.
Responsive Hero Image
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Ishita,
Unfortunately, it’s not directly possible to set table or mobile specific images at this time.
You can create device-specific widgets using the Toggle Visibility addon which is added by SiteOrigin Premium.
Hi Alex
The hero image keeps cropping as the width of the screen decreases. I am trying to set another image to display when the width goes under 780px.
How can I do that?
Hi Ishita,
I’d like to help you with setting a new image once the resolution is a certain width, but unfortunately, this is beyond the scope of the support we’re able to offer on our free forums. There is a fair amount of custom work involved.
We do offer this level of support to our premium users, so if you’d like to upgrade to SiteOrigin Premium, then I can help you over email support.
If you’d prefer not to upgrade to SiteOrigin Premium, then you can hire a WordPress developer from Codeable. They’ll charge you an hourly rate for any work done.
This is expected behavior when you set a Height due to how CSS background images set to background-size: cover; work. I would recommend giving the Responsive Notes section in this article a quick read for ideas on how to avoid this.