How to make full width image slideshows

Question

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?

Answer 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;
}

Answer 2

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%;
}