CODEWITHSUNDEEP
htmlcssmobile
Shyghar
Shyghar

Reputation: 311

Line-height do not work on mobile

I have a icon font and I need to center my letter in a circle. I copy my code in this jdfiddle
This is css code

.icon:before {
   margin: 0 auto;
   font-size: 57px;
}

.icon h2 { text-align: center; }

.circle.icon:before {
    border-radius: 50%; 
    color: #FFFFFF;
    width: 65px;
    height: 65px;
    display: block;
    text-align: center;
    line-height: 1.2em !important;
}

.icon.mobile:before{ content: 'F'; }
.mobileC { color: #8CC63E; }
.icon.mobile-background:before { background-color: #8CC63E; }

this is html code

<div class="icon circle mobile-background mobile"><h2 class="mobileC ">Mobile games</h2></div>

As you can see via normal browser they are centered
desktop

but when I open the page via mobile I see this
mobile
The same result if I turn-off the line-height from browser inspector.

Can someone know how can fix this?

Upvotes: 0

Views: 1331

Answers (1)

Adrien QUINT
Adrien QUINT

Reputation: 609

Did you try to add a 

vertical-align:middle;

?

in most cases, it works.

Or you can just use padding, and avoid resizing by using:

div{
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box;    
 box-sizing: border-box;      
}

Upvotes: 1

Related Questions