Edit height of a section


#1

I have a slideshow at http://coronadofol.org/new/index.php
The image used (http://coronadofol.org/new/images/store.jpg)has a height of 563px. I’m trying to give that slideshow that height, so it doesn’t take up the page. But whenever I look at the height with the web developer console, its at %100, but 100% of what? (whats the parent elements height & can I change it?


#2

Not sure what you are asking to do, but…

The 100% height that I see affects the gray overlay, a lightbox maybe, not the image box.

It looks like you might have some excessive padding here:
style.css (line 178)

.block {
    float: left;
    padding: 100px 0;  /* try reducing this considerably */
    position: relative;
    width: 100%;
}

and on line 1624

.shelter-text-carousel {
    float: left;
    padding: 130px 40px;  /* reduce the vertical padding */
    text-align: center;
    width: 100%;
}

There may be more adjustments required, so consider this a start.


#3

The height of the carousel is determined by the height of the tallest slides content plus the padding that Ron mentions above.

Your image is simply placed into the space that those slides take up so its height is always going to be 100% of the available space (a trick that absolute elements can do) otherwise it will not cover the text in the slides. The image itself has no effect on layout so changing the image height will mean the image will no longer cover the text in the slide.

If you want shorter height panels then you need to remove the extra padding that Ron mentioned and if you still want them smaller you would need to reduce the text content (or its font-size) to make the height of the panel smaller bearing in mind its the tallest slide that controls the overall height otherwise the page would jump up and down on each slide change.