CODEWITHSUNDEEP
jqueryhtmlcss
code-8
code-8

Reputation: 58662

My label/text in my div won't show

I have my carousel look like this:

enter image description here

I couldn't get my labels to display properly.

Here is how I create one of my box : 

<div class="tl-box-wrapper">
    <div class="tl-box">
        <div class="tl-top"> <i class="fa fa-circle yellow"></i>

        </div>
        <div class="tl-bot"> <i class="fa fa-circle yellow"></i>

        </div>
        <div class="tl-right">Yellow</div>
    </div>
</div>

As you can see, I create my label in here:

<div class="tl-right">Yellow</div>

I'm not sure why Yellow is not showing.

Can someone tell me what I missed? My whole code is in this Fiddle.

Upvotes: 0

Views: 1641

Answers (2)

Lynel Hudson
Lynel Hudson

Reputation: 2405

Your text isn't showing because .mp-carousel #mp-carousel-overflow is setting your font-size to 0. You can add font-size:14px to .tl-right to fix this.

https://jsfiddle.net/mxwjtjxw/10/

Upvotes: 2

Sven van den Boogaart
Sven van den Boogaart

Reputation: 12327

Edit your css with the following:

.tl-right {
    width:80%;
    height:100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    // ADD THIS
    font-size:20pt;


}

see the fiddle i made

Your code at .mp-carousel #mp-carousel-overflow contains font-size: 0pt which basicly means that your font is invisible.

Upvotes: 4

Related Questions