如何减少基础5中清理灯箱的旋转木马高度？

Question

不幸的是，我无法找到涵盖此主题的已经回答的问题。尚未提出相关问题：

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

Zurb关于清除灯箱的相关文档说明了以下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代码，这应该在以下内容中进行转换，以将高度降低到100px：

.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;
   }

}