CODEWITHSUNDEEP
htmlcssiosgoogle-chromemobile
Stefaan
Stefaan

Reputation: 182

Font-size issue in iOS, invisible in Chrome developer tools

On my site stefaanoyen.be I have an issue with a div in my footer.

This is the HTML:

<div class="right-div">
   <span class="footertips"><a href="https://www.stefaanoyen.be/category/blog">Krachttips</a> • </span>
   <a href="https://www.stefaanoyen.be/algemene-voorwaarden">Algemene voorwaarden</a> • 
   <a href="https://www.stefaanoyen.be/privacy">Privacy</a> • 
   <a style= "color:#b72518" href="https://www.stefaanoyen.be/contact/">Contacteer mij</a><
/div>

And this is the CSS:

.right-div {
    float: right;
    padding-right: 10px;
    font-size: 12px !important;
}

When I inspect my footer in Google Chrome developer tools, the right-div has a font size of 12px, also on iPhone width. However, when I look at my site in Chrome or Safari on my iPhone 8, the left-div has a font size of 12px, but the right-div has a bigger font size (the line that starts with 'Krachttips):

enter image description here

How come? I can't inspect the css on my iPhone and I have no idea where this is coming from.

Thank you so much for helping me out!

Upvotes: 0

Views: 439

Answers (2)

rangerz
rangerz

Reputation: 605

Try this css

body {
    -webkit-text-size-adjust: 100%;
}

You need to have macosx device to debug follow those steps Safari Develop Menu

Upvotes: 1

Ahmed Moayad AlMoghrabi
Ahmed Moayad AlMoghrabi

Reputation: 1277

Can you try to give the span and a tags the font size style property and check if it is ok?

Upvotes: 0

Related Questions