Jump to content
newcoder1010

How to fix carousel slideshow padding issue

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. 

Share this post


Link to post
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.

Share this post


Link to post
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

×