CODEWITHSUNDEEP
htmlcssmobiletwitter-bootstraptablet
ThePlague
ThePlague

Reputation: 329

Overlapping Text in CSS - How do I change it?

I'm trying to change an overlapping element (text) in my css file. One line of texts (in a regular browser) appears as two lines of text in mobile, overlapped together.

This change is for the mobile version of the site (the @media section for landscape tablets)

Currently, the header (h2) text is overlapping on an iPad/tablet.

Code from the h2 @media section:

.da-slide h2{
    font-size: 36px;
    width: 80%;
    top: 40px;
    padding: 18px 20px 18px 20px;

(The .da-slide h2 is the component that holds this text in the html)

I tried the line-height property but it didn't work?

Any ideas...

Upvotes: 15

Views: 85101

Answers (3)

tHARUNDA DEWMIN
tHARUNDA DEWMIN

Reputation: 11

enter image description here

I am assuming this is your problem if it is you can fix it by changing line-height : 60px like change what ever your want CSS property *line-height

Upvotes: 1

Romain
Romain

Reputation: 1948

Are you sure that the line-height css property has been apply to your class?

CSS 

    .da-slide h2{
        font-size: 36px;
        line-height: 36px;
        width: 80%;
        top: 40px;
        padding: 18px 20px 18px 20px;
    }

Otherwise, have you added the meta tag in the header?

<meta name="viewport" content="width=device-width, initial-scale=1">

Also, for responsive website, be sure that the text isn't ajusted:

CSS

body { -webkit-text-size-adjust: none; }

Upvotes: 22

STOP BIT
STOP BIT

Reputation: 71

This should do it by preventing the text from wrapping, but it will cut off the end text. i.e. won't display any text longer than the width.

Just add it to existing class:

display: block; /* may help stop any text wrapping and display it inline. */
display: inline; /* same as above */
white-space: nowrap;/* ensure no wrapping */
overflow: hidden; /* if for some reason it escapes the visible area don't display anything. */

Personally I like to use the ellipsis effect for long titles and tablet devices. Ellipsis trims the text and adds three dots where text has been trimmed.

text-overflow: ellipsis; /* if text is too long add three dots to the end to indicate text  continues */

Example of effect below:

This is an extremely long and completely unavoidable page title I need to show

This is an extremely long and completely unavoidable page title I need to show

Depending on width might display as:

This is an extremely long...

Hope that helps.

Upvotes: 7

Related Questions