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

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