instagram 小部件 wordpress 宽度在移动设备上不正确

Question

我安装了一个 instagram 插件，我把它放在了我博客的页脚中。在桌面版上，它非常好，但是在移动版上，屏幕更小并且所有图像彼此对齐，而不是桌面上的 6 个图像彼此相邻。

我想知道，如何在手机上将它们设为两行三张图片？每行的 3 张图像从左到右占屏幕的 100%？ css?

我无法为您提供 instagram 插件的完整样式 css，因为它具有内置 css。但是我可以从 inspect element 复制某些 css 元素并将 !important 放在它后面。我只是不知道该怎么做。

你可以在这里看到它 --> http://oihanevalbuenaredondo.be

编辑

@media screen and (max-width:720px) {
#sb_instagram .sbi_col6 {
data-cols:3!important;
}
}

这就是我现在拥有的，它修复了我每行有 3 张图像，但图像不是正方形，并且我的图像被剪切，没有调整

Answer 1

您需要使用 CSS @media 查询来定位移动设备，并添加以下 CSS:

@media (max-width: 640px) {
  #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_6 #sbi_images .sbi_item {
    width: 33.33% !important;
  }
  #sb_instagram .sbi_photo img {
    width: 100% !important;
    display: inline-block !important;
  }
  #sb_instagram .sbi_photo {
    height: 33vw !important;
    overflow: hidden;
    background: none !important;
  }
}

显然，您可能需要也可能不需要对所有内容都使用 !important。添加上面的 CSS 结果如下：

显然我已经将你的个人照片换成了占位符，但剩下的就是你的代码了。

instagram 小部件 wordpress 宽度在移动设备上不正确

instagram widget wordpress width not right on mobile

css

wordpress

plugins

widget

instagram