У меня есть показ слайдов drupal 7 с надписью внизу. Изображения слайд-шоу реагируют на изменение размера окна браузера, но заголовок переполняется в область содержимого или перемещается вверх по изображению. После обновления все отлично работает в новом размере окна. Есть ли какой-нибудь css, который можно применить к надписи, которая будет поддерживать выравнивание изображения при изменении размера браузера.Drupal Views Слайд-шоу без изменения размера с браузером
/*----------------------- 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;
}
}