CODEWITHSUNDEEP
htmlcssresponsive-design
user4622110
user4622110

Reputation:

how to avoid overlapping of text

I have a slider on which i am displaying text. but the text needs to be displayed over specific width, 

<div class="homepage-slider">
    <div id="sequence">
        <ul class="sequence-canvas">
            <li class="bg3">
                <!-- Slide Title -->
                    <div class="title"><? echo $top_text; ?></div>
            </li>
        <ul>
    </div>
</div>

css that i used is (had used under media queries)

#sequence .title 
    {
        text-align: left;
        margin-bottom: 7%;
        margin-left: -2%;
        font-family: roboto;
        font-size: 28px;
        min-width: 70%;
        overflow: scroll;
        padding:4%;
        position: relative;
    }

but the text is getting displayed like this

enter image description here

can someone please tell how to avoid this overlapping of text

Upvotes: 1

Views: 1193

Answers (4)

Vinayak
Vinayak

Reputation: 425

Yup Just add: 

#sequence .title {
     line-height: 20px;
}

Upvotes: 0

Venu
Venu

Reputation: 184

Give the text with in the html, so that we can get find the exact issue.

Upvotes: 0

user12854787
user12854787

Reputation: 1

It looks like a line-height issue. Add a "line-height: 1.3" and see if that works.

Upvotes: 0

Sachin
Sachin

Reputation: 40990

use the line-height property to manage the spacing between lines.

#sequence .title 
{
    text-align: left;
    margin-bottom: 7%;
    margin-left: -2%;
    font-family: roboto;
    font-size: 28px;
    min-width: 70%;
    overflow: scroll;
    padding:4%;
    position: relative;

}

The code which you've shown here doesn't specify the line-height property. So I doubt the line-height property is getting inherited to your .title from its parent, so just check from where it is getting inherited and set the higher value for it.

Upvotes: 2

Related Questions