页脚之间背景下方的空白区域(仅限移动设备)

Question

正如标题所说，只有在移动设备上查看时才会出现此问题。

在我的电脑上，它看起来完全符合预期，但是当我在移动设备上打开它时，背景图像和页脚之间有一个空白区域？

网站已上线@

https://claritysalonspa.com

任何帮助将不胜感激！

Answer 1

我不确定如何在后端添加背景图像，但请尝试添加以下样式。在此处，.page-id-29是添加到当前页面的类，并且您向其添加了背景图像。

.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
}

因此，解决方案是添加height: 100vh并更改图像位置以使其居中。

Answer 2

在你的风格中添加这个.css

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

Answer 3

这是因为您的body没有足够的content。如果您添加更多内容，则无需任何技巧。

您可以通过向body标签添加min-height来解决此问题。

.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 */
}

如果您想使页脚始终位于viewport的底部，请同时添加

。

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