Title: slider height
Last modified: August 21, 2016

---

# slider height

 *  [Larry34](https://wordpress.org/support/users/larry34/)
 * (@larry34)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/slider-height-7/)
 * I want to keep the original height of the slider on the main page, and reduce
   the slider height on all other pages and keep them responsive. I am clueless 
   when it comes to code. Is there a code that covers these issues that i can put
   in the custom css? I see ways to change the slider height but not the way i want
   to do it
    Thanks Larry

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [ElectricFeet](https://wordpress.org/support/users/electricfeet/)
 * (@electricfeet)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/slider-height-7/#post-4630010)
 * Try something like this:
 *     ```
       .attachment-slider-full {
           vertical-align: top;
       }
       .carousel .item {
         line-height: 20%;
         overflow: hidden;
         min-height: 20%;
       }
       ```
   
 * But it will depend on the height of your captions. If you have buttons, then 
   the size of the caption+button will dictate things.
 *  Thread Starter [Larry34](https://wordpress.org/support/users/larry34/)
 * (@larry34)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/slider-height-7/#post-4630022)
 * Thanks for responding! does this address my issue of keeping the home slider 
   the original size?
 *  [ElectricFeet](https://wordpress.org/support/users/electricfeet/)
 * (@electricfeet)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/slider-height-7/#post-4630037)
 * Oops. You’re right. I forgot to limit it to the home page. This should work:
 *     ```
       .attachment-slider-full {
           vertical-align: top;
       }
       .home .carousel .item {
         line-height: 20%;
         overflow: hidden;
         min-height: 20%;
       }
       ```
   
 * If this doesn’t restrict the changes to just your home page, post back with a
   link to your site. Sometimes the home/blog classes work differently, depending
   on where you have your blog posts showing.
 *  Thread Starter [Larry34](https://wordpress.org/support/users/larry34/)
 * (@larry34)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/slider-height-7/#post-4630038)
 * Okay
    [http://incrediblelarry.com/](http://incrediblelarry.com/) The home page
   looks as it is supposed to. I want other pages to have a slider half the height
   without all the space under it before the text. [http://incrediblelarry.com/festivals](http://incrediblelarry.com/festivals)
 * I added the code, and it brought them to the top of the page(great) but it leaves
   a huge space under it
    Thanks for your help ElectricFeet Larry
 *  [ElectricFeet](https://wordpress.org/support/users/electricfeet/)
 * (@electricfeet)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/slider-height-7/#post-4630048)
 * OK, it took me a while to figure this out, but I’ve got a solution that could
   work for you.
 * Looking at your site, it seems that you don’t really want a slider on each page.
   You simply want an image at the top of several pages. The images you are using
   are all 250px tall.
 * You can add the following CSS to your Custom CSS panel / or child theme (removing,
   of course, any other CSS that relates to trying to fix this problem):
 *     ```
       /* superglue slider to header */
       .attachment-slider-full {
           vertical-align: top;
       }
       /* For the following pages, limit the carousel height */
       /* For screen sizes over 1200px */
       .page-id-25 .carousel .item,
       .page-id-43 .carousel .item,
       .page-id-45 .carousel .item,
       .page-id-48 .carousel .item  {
         line-height: 250px;
         min-height: 250px;
       }
       /* And for smaller screen sizes ... */
       @media (max-width: 1200px) {
           .page-id-25 .carousel .item,
           .page-id-43 .carousel .item,
           .page-id-45 .carousel .item,
           .page-id-48 .carousel .item {
               line-height: 172px;
               min-height: 172px;
           }
       }
       @media (max-width: 979px) {
           .page-id-25 .carousel .item,
           .page-id-43 .carousel .item,
           .page-id-45 .carousel .item,
           .page-id-48 .carousel .item {
               line-height: 154px;
               min-height: 154px;
           }
       }
       @media (max-width: 480px) {
           .page-id-25 .carousel .item,
           .page-id-43 .carousel .item,
           .page-id-45 .carousel .item,
           .page-id-48 .carousel .item {
               line-height: 95px;
               min-height: 95px;
           }
       }
       @media (max-width: 320px) {
           .page-id-25 .carousel .item,
           .page-id-43 .carousel .item,
           .page-id-45 .carousel .item,
           .page-id-48 .carousel .item {
               line-height: 70px;
               min-height: 70px;
           }
       }
       ```
   
 * What I did there is take all the default values and divide them by 2, because
   the default slide height is 500px and your images are 250px high. If you ever
   change your image heights and want to change the figures, do it proportionally(
   for example, multiply them all by 0.8 to get down to a 200px-high image).
 * Because you’re using the carousel and because it’s responsive, as it resizes,
   it will chop the bottom off the images. This is the price you pay for always 
   seeing the whole width of the image. Most of your shots seem to come out of it
   OK.
 * If you’re going to have many more pages, you might want to install the [Reveal IDs](http://wordpress.org/plugins/reveal-ids-for-wp-admin-25/)
   plugin. It shows the IDs of each page/post in the page/post list in the admin
   screens and saves you fiddling around looking them up. ([ShowID for Post/Page/Category/Tag/Comment](http://wordpress.org/plugins/showid-for-postpagecategorytagcomment/screenshots/)
   looks cute and simpler, too, but I haven’t tried it yet.)
 * Good luck 🙂
 * (Good to see you sorted out the bio page!)
 *  Thread Starter [Larry34](https://wordpress.org/support/users/larry34/)
 * (@larry34)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/slider-height-7/#post-4630061)
 * Thanks, this did the trick!
    I’m pretty much done with the site for the moment,
   but if you have any suggestions on appearance etc. I’d be happy to hear it! Thanks
   so much for all your help ElectricFeet! Larry
 * [incrediblelarry.com](http://incrediblelarry.com)

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘slider height’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png)
 * Customizr
 * [Support Threads](https://wordpress.org/support/theme/customizr/)
 * [Active Topics](https://wordpress.org/support/theme/customizr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/customizr/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [Larry34](https://wordpress.org/support/users/larry34/)
 * Last activity: [12 years, 2 months ago](https://wordpress.org/support/topic/slider-height-7/#post-4630061)
 * Status: not resolved