图库在移动视图中消失

Question

我正在玩一些css和html并且遇到了这个网站...为什么当窗口收缩时画廊消失了？我检查了源代码，看不到任何css（媒体查询），表明大小可能是一个问题？

帮助一只好奇的猫

谢谢

Answer 1

<div id="shoppable-instagram" style="clear:both" class="ps-container hide-for-small-only">

从div id＆＃39; shoppable-instagram＆＃39;中删除.hide-for-small类。它会工作正常。

你的新DIV应该是：

<div id="shoppable-instagram" style="clear:both" class="ps-container">

此代码是将div隐藏到移动设备中的原因。它位于foundation-flex.min.css第2行

中

@media screen and (max-width: 39.9375em)
    .hide-for-small-only {
        display: none!important;
    }

Answer 2

该网站使用基础，这是一个框架，可以更快，更有效地编码网站。 Foundation使用css类根据屏幕大小隐藏和显示内容。这在CMS之外也很受欢迎。基本上你有一个像：

这样的元素

<div class="hide">
  // content
</div>

您通过媒体查询定位该类以在特定断点处隐藏它：

.hide {
   display:block;
}

@media screen and (max-width: 40em) {
    .hide{
       display:none;
    }
}

反过来可以反过来隐藏内容，然后显示较小的屏幕。 Foundation使用这些类和断点来隐藏和显示超大，大，中，小屏幕的内容。