css - 如何降低 Foundation 5 中 Clearing Lightbox 的轮播高度？

Question

很遗憾，我无法找到涵盖该主题的已回答问题。尚未提出相关问题:

我正在尝试降低 Foundation 5 中清除灯箱的缩略图轮播的高度，以便为顶部的显示图片腾出更多空间。我在额外的 CSS 样式表中使用 CSS 而不是 SCSS 来覆盖 CSS Foundation 设置。

Zurb 关于 Clearing Lightbox 的相关文档说明了以下 SCSS 变量 ( http://foundation.zurb.com/docs/components/clearing.html ):

// We use these to make the image and carousel height and style
$clearing-active-img-height: 75%;
$clearing-carousel-height: 150px;
$clearing-carousel-thumb-width: 175px;
$clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255);

使用普通的 CSS 代码，这应该转换为以下内容以将高度降低到 100 像素:

.clearing-assembled .clearing-container .carousel {
height: 100px;}

不幸的是，这不会改变轮播的高度。

非常感谢您对此的帮助。谢谢。

Answer 1

看起来您需要像下面这样设置 css 才能正常工作。您可能需要调整数字。

@media only screen and (min-width: 40.063em) {
   .clearing-assembled .clearing-container .visible-img {
       height: 92%;
   }

   .clearing-assembled .clearing-container .carousel > ul li {
       width: 50px;
   }

   .clearing-assembled .clearing-container .carousel {
       width: 50px;
   }

}