Tip: Custom CSS to modify size of slider images

  • FYI…my customer likes this theme a lot, but wanted to reduce the height of the slider (carousel) images — they felt that 500px was taking up too much screen real estate. Here’s a little custom CSS you can add to reduce the height to, say, 300px:

    .carousel .item {
  line-height: 300px;
  overflow: hidden;
  min-height: 300px;
}

    They also wanted to reduce the size of the gray background that appears behind the slider title/caption/button. Here’s how to do that:

    .carousel-caption {
  padding: 1%;
}

    When you do this, you also might want to change the size of the fonts used in the title/caption. I’ll leave that as an exercise for the reader.

    Nikeo: Please advise if there is anything wrong with what I’ve shown here. Thanks!

Viewing 6 replies - 16 through 21 (of 21 total)
Viewing 6 replies - 16 through 21 (of 21 total)
  • The topic ‘Tip: Custom CSS to modify size of slider images’ is closed to new replies.