Jump to content

How to make the image slideshows full width of the screen


newcoder1010
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

  • 2 weeks later...

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 by newcoder1010
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...