Text below got block by image div?

HTML & CSS
1

I’m using Carousel in Materialize, text below the image is blocked by div it doesn’t show the rest. Any solution to shows all the text? (Z-index is way to messy)
HTML

<!--    Carousell-->
    <div class="carousel">
        <div class="carousel-item">
            <img class="materialboxed" width="400px" src="personal/shanghai.jpg" alt="shanghai">
            <h2 class="caption">Shanghai Old Millfun, a monstrous concrete, steel, and glass slaughterhouse built in early twentieth century during pre-communist Shanghai.

            Shanghai 2013
            </h2>    
        </div>    
        <a class="carousel-item valign-wrapper" href="#two!">
            <img class="materialboxed" width="400px" src="personal/refugees.jpg" alt="refugees">
        </a>
        <a class="carousel-item" href="#three!">
            <img class="materialboxed" width="400px" src="personal/taiya.jpg" alt="taiya">
        </a>    
        <a class="carousel-item valign-wrapper" href="#four!">
            <img class="materialboxed" width="400px" src="personal/image1.jpg" alt="arizona">
        </a>
        <a class="carousel-item" href="#five!">
            <img class="materialboxed" width="400px" src="personal/gasstation.jpg" alt="gas station">
        </a>
        <a class="carousel-item valign-wrapper" href="#six!">
            <img class="materialboxed" width="400px" src="personal/womenmarch.jpg" alt="women march">
        </a>
    </div>

CSS


h2 {
    font-size: 16px;
    color: #757575;
    font-family: Source Sans Pro;
}
.carousel .carousel-item{
    width: 400px;
    height: 100%;
    margin-top: 50px;
}
2

The carousel is only 400px tall so any content greater than that will be cut off by the overflow:hidden on .carousel.

If you remove the overflow:hidden then the text will show but of course may overlap what comes next.

It doesn’t look like the carousel was built with that type of fluid content in mind as it requires a fluid height which won;t work with that concept.

3

Thank you Paul, i’ve use overflow:visible then the result as you said some of carousel item became overlapping.
Even some of landscape image, text appear next to it.
Do you have recommend framework would be better with image and text below?

4

The problem with carousels is that they nearly all rely on being a fixed height (whether percentage of px) and that means that you can’t accommodate fluid amounts of text. If you have an auto height carousel then you can add fluid content but that means every time a new slide appears the page will jump up and down because the height of the carousel changed. This is usually very disconcerting.

Therefore (generally) carousel sliders will try to contain text and captions on top of the image itself or preserve a certain amount of space underneath the image but still require that the amount of text added fits into the allocated space.

There are a few fluid carousel around and there is one linked from this page.

https://bradfrost.github.io/this-is-responsive/patterns.html

However it looks like a lot of styling is left up to the user.:slight_smile:

2 Likes
5

Thank you so much such a useful information.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.