Jump to content

How to fix carousel slideshow padding issue

Recommended Posts


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. 


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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...