CODEWITHSUNDEEP
htmlcss
fresher
fresher

Reputation: 911

display two line of shadow if text is one line also

we are displaying text on image & we are giving shadow for that text here.

if text is two lines, than it will display shadow for two lines.

enter image description here

if text is one line, than it will display shadow for one line

enter image description here

what we need is we want to display two line of shadow if text is one line also.

.fanbook-name {
    background: rgba(255, 255, 255, 0.5); /* add this */
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1;
}
.fanbook-name b {
    /* bottom: 25px; */
    color: #000;
    font-size: 12px;
    /* position: relative; */
    text-transform: capitalize;
}

.fanbook-image li {
    float: left;
    margin-bottom: 1%; /* change this */
    margin-left: 0.5%;
    margin-right: 0.5%;
    position: relative; /* add this */
    width: 24%;
}

Upvotes: 1

Views: 36

Answers (1)

Marcos Pérez Gude
Marcos Pérez Gude

Reputation: 22158

Set a min-height with the value of the line-height * 2 calculation. Easy.

Upvotes: 2

Related Questions