页脚之间背景下方的空白（仅移动设备）

Question

As the title says, the issue arises only when viewed on mobile.

On my pc it looks exactly as desired but when I open it up on a mobile device there is a blank space between the background image and the footer?

Site is live @

https://claritysalonspa.com

Any help would be appreciated!

Answer 1

I am not sure how you are adding the background image in the backend, but try adding the following style. In here, .page-id-29 is the class added to the current page, and you added a background image to it.

.page-id-29 {
    background-image: url(YOUR-IMAGE);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;                 // add the height
    background-position: 50% 50%;  // center the image
}

so the solution is to add height: 100vh and also change the image position so it is centered.

Answer 2

Add this in your style.css

@media screen and (max-width:600px){
.page-id-29{height: 95vh;}

}

Answer 3

It's because your body doesn't have enough content . If you add more content then there is no trick needed.

You can overcome this by adding min-height to your body tag.

.page-id-29 {
    background-image: url(https://claritysalonspa.com/wp-content/uploads/2018/03/IMG_5215.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 92vh; /* this for height */
    background-position: center center; /* to center the image */
}

If you want to make your footer always bottom of the viewport please add thi also.

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    padding: 0 !important; 
}