文章/答案/技术大牛

发布

社区首页 >问答首页 >Joomla响应站点上的幻灯片容器最小高度

问Joomla响应站点上的幻灯片容器最小高度
EN

Stack Overflow用户

提问于 2015-04-21 12:44:42

回答 1查看 92关注 0票数 0

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

现在，由于站点是响应的，我不能仅仅将一个最小的高度放在幻灯片显示容器中，因为这个值是根据观点变化的。

有什么解决办法的窍门吗？

我的网站

div类被称为"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">

joomla

responsive-design

height

containers

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-04-21 12:55:49

您可以用.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 }以在页面加载时显示滑块的第一个元素。也许这个解决办法能起作用

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29772594

复制

相似问题

问Joomla响应站点上的幻灯片容器最小高度
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Joomla响应站点上的幻灯片容器最小高度EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Joomla响应站点上的幻灯片容器最小高度
EN