slider height

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.

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.

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 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 looks cute and simpler, too, but I haven’t tried it yet.)

Good luck 🙂

(Good to see you sorted out the bio page!)