CODEWITHSUNDEEP
htmlcsswordpressmobile
cnr_eps
cnr_eps

Reputation: 75

Text styling line-height on mobile not working (WordPress)

stack community, I have a strange issue concerning how my text is displayed on mobile.

Changing the line-height in @media didn't help and I'm out of ideas on what to do. The text is cut on the top line and adding padding or margin doesn't help. Inside the google development tools, the preview looks fine, once opened on my phone the text is cut.

What could be the reason? How can I fix it?

Screenshots: screenshots uploaded to imgur

Link: http://monifit.co.uk/

I appreciate your help.

Upvotes: 0

Views: 678

Answers (2)

kashalo
kashalo

Reputation: 3562

Visual Composer generating your style file and the following code cause the issue: 

 @media only screen and (max-width: 690px)
body .row .col.section-title h1, body h1 {

line-height: 24.7px;
}

if you can't change it from your visual composer setting you can overwrite it by the following: 

@media only screen and (max-width: 690px)  body h1 {
  line-height: 40px !IMPORTANT;
}

Upvotes: 1

vitomadio
vitomadio

Reputation: 1140

You have to get rid of the line-height in your css h1 tag using @media query max-width: whatever px;

Upvotes: 1

Related Questions