2017-02-10 79 views
0

我有一個drupal 7視圖幻燈片放映,底部有一個標題。當瀏覽器窗口調整大小時,幻燈片圖像會響應,但標題會溢出到內容區域或向上移動到圖像中。刷新之後,它完全可以在新的窗口大小下正常工作。 是否有一些CSS可以應用於標題,它將保持其與圖像調整大小的瀏覽器對齊。Drupal Views Slideshow caption not resizing with browser

/*----------------------- 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; 
    } 
} 

回答

0

在我剛纔用FlexSlider末期的幻燈片模塊,而不是隻是一個意見幻燈片,這一切響應解決。