instagram小部件WordPress的宽度不对手机

我有一个instagram插件安装，我已经放在我的博客页脚。在桌面版上，然而，在移动版上，屏幕更小，并且所有图像彼此对齐，而不是像在桌面上一样彼此相邻的6张图像。instagram小部件WordPress的宽度不对手机

我想知道，我怎样才能让他们2行3移动图像？每行的3张图像从左到右取100％的屏幕？用css？

我不能给你instagram插件的全部风格的CSS，因为它有一个内置的CSS。但我可以从检查元素复制某个css元素，并将!important放在它后面。我只是不知道该怎么做。

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

编辑

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

这是我现在有，它解决了我每行得到了3张图片，但图像arent正方形，我的图像被切断，不调整

来源

2017-02-23 Oihane

在[此文件]（http://oihanevalbuenaredondo.be/wp-content/plugins/instagram-feed/css/sb-instagram.min.css?ver=1.4.8）中，有2个媒体查询为640像素和480px将'.sbi_item'的宽度定义为'width：50％;'和'width：100％;' - 将这两个宽度都改为'width：33.3％' –

这是行不通的：s – Oihane

你需要使用一个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结果如下：

显然我已经换出你的个人照片的占位符，但其余的是你的代码。

来源

2017-02-24 01:08:22

谢谢许多！这工作完美:) – Oihane

instagram小部件WordPress的宽度不对手机

回答

相关问题