How to make the image slideshows full width of the screen

[newcoder1010]

Hi,

 

I created image slideshows. Images are different sizes. I like to make all the images full width of screen and height 550px. If you could visit my page and inspect the slideshows and then help me with the css, it would be helpful. After I inspect the pages in chrome, i see there are so many classes. So, I am confused which one to give you.

 

After inspect my page, I wrote the below css and it did not work.

 

http://chartersdc.com/

.views-slideshow-cycle-main-frame { width: 100%;}.view-slideshowv .views-slideshow-cycle-main-frame-row {    min-height: 550px;    background-size: cover;    min-width: 100%;}

Thank you so much.

[dsonesuk]

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

[newcoder1010]

Thanks. When I add the code, it does make it full width but then it goes back to original automatically. If you visit my page, you will notice that.

[dsonesuk]

Try with this also

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

[newcoder1010]

This time it is not making it full width at all. All the images showing in its original sizes.

[newcoder1010]

I am trying to make similar to this https://d7.ustravel.org/. Both sites using drupal. I inspected their page but not sure why their site works but not mine.

[dsonesuk]

Did you use all of this?

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

OR one in place of other? cause you need both;

[newcoder1010]

After I add both, it is working now. Thank you so much. I always appreciate your help.

[newcoder1010]

Hi,

 

I manually saved two images with two different widths but same height of 400. After upload the images, I wrote the below css. My expectation was to see the full 400 height image and I am not seeing it. Images are trying to get larger height than they got smaller height. Images are being cropped at the bottom. Can you please help?

@media only screen and (min-width: 768px) {

.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: 400px;  width: 100% !important;

}

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

}

http://godrupal.info/

 

I am using bootstrap theme in drupal. When I make the screen width smaller little by little i can see the full height. Is it something to do with media query? My goal is to make it 100% width and 400px height for any screen wider than 768px.

 

 

 

Thanks.

Edited November 12, 2015 by newcoder1010

[dsonesuk]

Well you asked for full width of screen, and the height extends proportionately, if you want the images to look streched unproportionately and look odd just change height from auto to the fixed height you require.