Joomla 响应式网站上的幻灯片容器最小高度

Question

我的响应式 Joomla 3 网站上的幻灯片 (JS FlexSlider) 容器出现问题。加载时主要内容首先加载，由于幻灯片仍在加载，网站的其余部分位于顶部。当幻灯片准备就绪并且运行时，所有内容都会向下推到它所属的位置。

既然网站是响应式的，我就不能只给幻灯片容器设置一个最小高度，因为这个值会根据视点而变化。

关于如何解决这个问题的任何提示？

div class 被称为 "bigimage"，它被放置在任何其他容器之外以全宽显示。

</head>
<body id="<?php echo ($itemid ? 'itemid-' . $itemid : ''); ?>">

  
    <!-- Begin Navbar-->
    <?php if ($this->countModules('position-9')): ?>
      <div class="navbar navbar-inverse navbar-fixed-top">
      <!-- navbar-inverse navbar-fixed-top -->
        <div class="navbar-inner">
          <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>          
            <a class="brand" href="#"><?php echo $sitename ?></a>
            <div class="nav-collapse collapse">
              <jdoc:include type="modules" name="position-9" style="none" />
            </div>
          </div>
        </div>
      </div><!--End navbar-->
      <?php endif; ?>
  
        <?php if ($this->countModules('position-5')): ?>
    <div class="bigimage">
     <jdoc:include type="modules" name="position-5" style="none" />
     <div class="clearfix"></div>
    </div><!--End Bigimage-->        
    <?php endif; ?>

 <div class="container">
    
  <!-- Begin Header-->
  <div class="header">
   <div class="header-inner">

Answer 1

您可以针对 media queries 的不同分辨率设置 .bigimage 的最小高度。

/* Small devices (tablets, 768px and up) */    
@media (min-width: 768px) { 
    .bigimage{
         min-height: 300px;
    }  
}

/* Medium devices (desktops, 992px and up) */

@media (min-width: 992px) { 
     .bigimage{
         min-height: 500px;
    }   
 }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
    .bigimage{
         min-height: 800px;
    } 
}

正如我所见，它在开始运行之前隐藏了所有元素。尝试设置 .flexslider .slides > li:first-child { display: block } 以在页面加载时显示滑块的第一个元素。也许这个解决方法会奏效

Joomla 响应式网站上的幻灯片容器最小高度

slideshows container min-height on Joomla responsive site

height

joomla

containers

responsive-design