Homepage color section backgrounds not correct on iPad

Hey Lucia,

I’m very sorry for the late reply. Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (min-width: 768px) and (max-width: 1024px) {
.avia-full-stretch {
    background-size: contain !important;
}
}

Best regards,
Rikard

Hi,
Sorry for the late reply, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 1030px) { 
	#top.home .av-parallax {
		background-size: cover !important;
	}
}

After applying the css, Please clear your browser cache and check.
If you want to use different background images for mobile you can clone the section and make it visible only for mobile and then change the background image. Then ensure the original section is not visible on mobile.

Best regards,
Mike

Hi,
We will leave this open to hear back from you.

Best regards,
Mike

Hey,

I updated the code to following one

@media only screen and (max-width: 1030px) { 
    .avia-safari .avia-bg-style-fixed {
		background-size: cover !important;
                background-attachment: scroll !important;
	}
}

Could you please clear browser cache on your ipad and check once again?

Best regards,
Yigit

Hi,

Have you tried uploading larger images? Current size of the images is around 1500x1000px and uploading a version that is twice that size should cover up retina displays nicely. The screen resolution of the latest iPad device is 2048×2732 pixels.

Best regards,
Ismael

Hi,

Thank you for the update.

Looks like the parallax container is not resizing correctly on landscape mode. To adjust the style of the parallax container, add this code in the Quick CSS field or the style.css file.

@media only screen and (max-width: 1366px) {
    .av-parallax {
	background-size: cover !important;
	background-attachment: scroll !important;
	height: 100% !important;
    }
}

Please don’t forget to toggle the Performance > File Compression settings after adding the code.

Best regards,
Ismael

Hi,

Sorry for the delay. The css code above will only work if parallax is enabled, but looks like that the parallax effect for the color sections have been disabled.

To make it work for non-parallax background, we disabled the Performance > File Compression settings temporarily and adjusted the code in the Quick CSS field.

@media only screen and (max-width: 1366px) {
  .avia-bg-style-fixed, .av-parallax {
    background-size: cover !important;
    background-attachment: scroll !important;
    height: 100% !important;
  }
}

Please make sure to remove the browser cache prior to checking the page again on iPad.

Best regards,
Ismael