Background image is not responsive on tap and mobile

[Simon Chan]

Dear Bill,

The background image made by SiteOrigin Hero widget can’t be showed correctly on tap and mobile. How can it be fixed with thanks!

Simon

Attachments:

1. 

   Screenshot_2016-08-02-08-02-04.png
   

[Bill Robbins]

Good Morning Simon,

Excellent question. Tricky situation. The short answer is I don’t believe so. If you want to have the entire image always visible I think you’ll need to switch to a different image slider. Site Origin’s slider is made differently as near as I can tell from looking at the code on the front page.

It places the image into the background of each slide element. When that happens the image has to conform to the size of the element instead of allowing the image to set the size. Most of the time you need the image to set the size if you want it to be nicely responsive. Otherwise you’ll end up with letter boxing. If you want to give that a try, you could add this to the Custom CSS in the Advanced section of the customizer:

.sow-slider-image.sow-slider-image-cover {
	background-size: contain !important;
	background-repeat: no-repeat !important;
}

I would try something like Soliloquy or MetaSlider instead. I believe that will work out better for you in the end.

Let me know if I can help,
Bill

[Author]

Posts