Question

我有一个drupal 7 views幻灯片放映，底部有一个标题。当调整浏览器窗口大小但是标题溢出到内容区域或向上移动到图像时，幻灯片显示图像是响应的。刷新之后，它在新的窗口大小下完美运行。是否有一些可以应用于标题的CSS可以在调整浏览器大小时使其与图像保持一致。

    /*----------------------- Slideshow ------------------*/
.l-region--slideshow {

  margin-top: 1em;
  margin-bottom: 2em;
}

.views_slideshow_cycle_main_front_page_slideshow-block {
  position: relative;
}
.views-field-field-slide-caption .caption-enhance {
    position: absolute;
    width: 100%;
    height: auto;

    // left: 0px;
    bottom: 0px;
    background-color: #015697;
    color: #fff;
    padding: 5px 10px 5px 20px;
    text-shadow: 1px 1px 1px rgba(0,0,0,1);
    moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    }

/* Make slideshow img responsive */

.views_slideshow_cycle_main {
  width: 100%;
  float: left;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame {
  width: 100% !important;
  height: auto;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {
  width: 100% !important;
  height: auto;
}
.views_slideshow_cycle_main .field-content {
  max-width: 100%;
  width: 100%;
}
.views_slideshow_cycle_main .field-content img {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
#views_slideshow_cycle_main_front_page_slideshow-block {
  padding-bottom: 1em;
  border-bottom: double #ddd;

}

/*Make Caption Font Size Smaller for mobile ---------------------------*/
@media all and (max-width: 440px) {
  .views-field-field-slide-caption .caption-enhance {
    font-size: 75%;
    line-height: 1em;
  }
}

Answer 1

最后我只使用了FlexSlider Views幻灯片模块，而不仅仅是一个视图幻灯片，而且它都是响应性的。

Drupal Views幻灯片标题没有使用浏览器调整大小

1 个答案: