0

I am using bootstrap sub-theme as default theme. I created a views slideshow block. In the tpl file, I added this:

<div class="test-region">
 <?php print render($page['test']); ?>
</div>

I placed the slideshow block into the above region.I can see my slideshow on my site. I added the below css to make the image slideshows 100% full width but it is not working. When I refresh my page, I can see the image slideshows in full width for 1 sec but then images go back to original sizes.

.views-slideshow-cycle-main-frame-row-item .field-content img {    
    min-height: 500px;
    width: 100%;
}

Do you know why images show in full width for a sec then go back to original sizes?

1

I can see the image slideshows in full width for 1 sec but then images go back to original sizes.

sounds like there is another css that is loaded after that is causing them to shrink. (perhaps it's in the views slide show css file). To prevent anything that is loaded after from overriding your css try adding the !important tag

so try this:

.views-slideshow-cycle-main-frame-row-item .field-content img {    
    min-height: 500px !important;
    width: 100% !important;
}
  • Sorry, I still have the same issue. If you could visit the page, you may experience the same. www.chartersdc.com – learn4ever Nov 2 '15 at 22:47
  • 1
    I made some changes and posted my answer. Thank you. – learn4ever Nov 2 '15 at 23:17
1

Below is the answer:

 .views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section, .views-slideshow-cycle-main-frame-row.views_slideshow_cycle_slide.views_slideshow_slide {
        height: auto !important;
        min-height: 550px;
        width: 100% !important;
    }

.views-slideshow-cycle-main-frame-row-item .field-content img {
height: auto;
    min-height: 500px;
    width: 100%;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.