Home Section Background Images Don't Scale for Mobile View

[Scott Hunter]

Hi Bill,

In mobile devices, the Hero Roll at the top of the homepage scales (somewhat) … but other images uploaded as backgrounds for other hero sections do not. Any way to fix this?

Scott

[Bill Robbins]

Hi Scott,

Can you give me an example of a page where you’re running into that?

Thanks,
Bill

[Scott Hunter]

Hi Bill,

This is happening on the homepage… vedavoo.com

Thanks!
Scott

[Bill Robbins]

Thanks Scott, I see it now.

Fixed background images have issues with mobile devices. Not only do they not fix in place (that takes too much memory) they also will only use the size of the document for sizing instead of a box for example.

Give this a try:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 1024px) {
   
   	#home-two {
   		width: 100% !important;
   		max-width: 100% !important;
   		background-attachment: scroll !important;
   		background-position: bottom right !important;
   	}
   
   
   }
   

3. Update your settings.

See how that works for you,
Bill

[Scott Hunter]

Hi Bill,

This seems to have fixed it – and I added another block for #home-four as well to cover the other affected spot. Basic desktop operation seems slower at first glance – but this may be internet connection speed.

Any way to do the same for the hero sections?

Thanks! Great fix!

Scott

[Bill Robbins]

Hi Scott,

Since the hero sections are set to scroll and aren’t fixed in place, they won’t expand to the height of the document like the others.

There is an option for the hero area to add a separate image for mobile devices. It’s down at the bottom of the hero area options, beneath the colors. That might be a good option to have a different image from main images there. Just a thought.

Take care,
Bill

[Author]

Posts