Question

我一直在寻找一些尝试不同方法的方法来尝试在移动版本的主屏幕上删除我的图像之间的空白区域。它只发生在我的移动版本上。我的网站网址如下：

https://athleteperks.co.uk

我的主屏幕上的两张图像之间也有一个很薄的小白色间隙，这也很适合删除。如果有人可以帮忙的话会很棒。

谢谢

Answer 1

如果您指的是页脚前面的底部5个图像，则需要在移动状态767上删除填充，如下所示：

.fw-row .blog-grid-items {
   padding:0;
}
.blog-grid-items .blog-item.col-sm-sf-5 {
   padding:0;
}

添加上面的CSS会使移动设备上的最后5个图像全宽，并消除空白区域。

同样删除下面的CSS消除了主屏幕上两个图像之间的小1px间隙：

.row:not(.fw-row) .spb_swift-slider .swift-slider {
   margin-left: 0;
}

已编辑的答案
需要将以下CSS添加到样式表中，以便从移动设备上的图像中删除空白区域：

.spb_text_column, .spb_content_element {
   margin-bottom: 0;
}

/* Mobile media query */
@media (max-width: 767px) {
    .swift-slider-outer {
        height: auto !important;
    }
}

要使上述媒体查询有效，您必须在头文件中包含以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

这里是代码，如果你想要消除同一行中5个图像之间的空间：

.col-sm-sf-5 {
   width: 25%;
   padding: 0px;
float: left;
}

.row:not(.fw-row) .spb_swift-slider .swift-slider {
  margin-left: 0px;
}
.row {
   margin-left: -15px;
   margin-right: -15px;
}
.blog-grid-items .blog-item {
   margin: 0 0 0px;
   height: 330px;
   padding-top: 0;
}

如果您只想为分辨率为1024像素的移动版修改设计，请添加此代码并在此代码中添加上面的新类。

@media only screen and (max-width : 1024px) {
   .classname {
       /* other styles here */
   }
}

如何删除wordpress移动版上图像之间的空白区域？

2 个答案: