Jump to content

How to fix carousel slideshow padding issue


newcoder1010
 Share

Recommended Posts

Hello,

I spent hours to fix it but no luck. 

I created slideshow using carousel. Original size of each image is 1500x650px.

CSS to parent class and slideshow images. 

.front .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 550px;
}

.front .view-sliders img {
    width: 100%;
}

When I visit the site in laptop, it looks ok. As I am making the screen smaller, I see padding between bottom of image and bottom of parent.  I can fix the padding by giving height:100% instead of giving height:550px to parent. Problem with that is the image height in laptop looks big. 

When I get to mobile screen, I have this. I can kind of accept it as is.

front .carousel-inner {
    height: 100%;
}

At his point, I am asking you to help me fixing it. You can provide any recommendations to make it responsive slideshows. I would like to keep the slideshow images height about 550px by cropping the images. This is my site. If you could visit my site and help me, I would really appreciate it. 

Thanks. 

Link to comment
Share on other sites

There is no sign of padding? the only padding is from element further outer parent elements?

For a proportional image, you usually set width: 100%; and height: auto; the outer parent inner element will extend to the these image dimensions.

Now to restrict the height of parent use max-height: 550px; this will force height not to extend beyond this height and with overflow: hidden; will crop the images true height.

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...