Site wide background image leaving space under background image on mobile

Support
#1

Hi,

I have a background image set side wide in Pro > Theme Options

When a mobile device is held in landscape mode there is a space under the background image.

any help resolving this is greatly appreciated.

thanks,

Brent

#2

Hello Brent,

Thanks for writing in!

I tested the website in Chrome dev tools and I am unable to replicate the space issue on my end? Can you please share some screenshot for us to take a closer look?

Thanks.

#3

Hi Prasant,

I use safari dev.

Attached is a screen shot of the issue.

You can see the white space that is below the background img

thanks,

Brent

#4

Hi Brent,

Please find and disable this custom CSS:

@media (max-width: 767px) {
    .backstretch img {
        width:100% !important;
        height: 100% !important;
        left: 0 !important;
    }
}

Hope it helps :slight_smile:

#5

Hi,

When i remove that css the issue from this post returns.

Hoping we can find a solution that fixes both.

thanks,

Brent

#6

Hi Brent,

Can you try this custom CSS instead. This will make the CSS work on portrait only.

@media only screen and (min-device-width: 480px) 
                   and (max-device-width: 640px) 
                   and (orientation: portrait) {

.backstretch img {
        width:100% !important;
        height: 100% !important;
        left: 0 !important;
    }
}

You may also check this guide.

Hope this helps.

#7

Hi Lely,

the issue from https://theme.co/apex/forum/t/background-image-changes-size-on-mobile-when-scrolling/58167/4 still persists

thanks

Brent

#8

Hello Brent,

I have checked your site on my phone. I could not replicate the issue. This is what I am seeing:

Please clear your browser cache or use private browsing mode in your phone and check your site again.

#9

Hi Rue,

the issue that i started this post about has been resolved now.

the issue from https://theme.co/apex/forum/t/background-image-changes-size-on-mobile-when-scrolling/58167/3 permits

when in portrait mode the background image changes size.

the backstretch code from that post fixed the issue but created the issue this post was started about.

#10

Hello Brent,

This custom CSS will affect all screen size that is smaller than 768 pixels.

@media (max-width: 767px) {
    .backstretch img {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
    }
}

This code, on the other hand, will affect only the screen that is greater than or equal to 480 pixels up to 640 pixels and it must be portrait orientation.

@media only screen and (min-device-width: 480px) 
                   and (max-device-width: 640px) 
                   and (orientation: portrait) {

.backstretch img {
        width:100% !important;
        height: 100% !important;
        left: 0 !important;
    }
}

Please choose which one should be applicable to your site. You may remove the unnecessary code afterward.

Hope this helps.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.