Drupal 视图幻灯片标题未使用浏览器调整大小

Question

我有一个drupal 7视图幻灯片，底部有一个标题。当调整浏览器窗口大小但标题溢出到内容区域或向上移动到图像中时，幻灯片图像会响应。刷新后，一切都在新窗口大小下完美运行。是否有一些 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 视图幻灯片模块，而不仅仅是视图幻灯片，这一切都是响应式的。