same font-size, different rendered size

Question

Inside my footer I have 2 divs. Inside both of these divs there is a p with some text in it. However the text in the second div is alot bigger even though they have the same css applied.

If i disable the font-size property in my browser, all the text get smaller, however the text in the bottom div stays bigger...

see img with the result: weird result

I would expect all the text to be the same size.

<div class="footer">
  <div class="info">
    <div>
      <p>
        <b>KSA Nationaal</b>
      </p>
      <p class='spacer'>02/201.15.10</p>
      <p>Vooruitgangstraat 225</p>
      <p class='spacer'>1030 Brussel</p>
      <p class="spacer">
        <a href="http://www.ksa.be">www.ksa.be</a>
      </p>
    </div>
    <div>
      <p>
        <b>De leukste safari van 2018!</b>
      </p>
      <p>Joepie 28</p>
      <p>16-19 april</p>
      <p class='spacer'>Sjo’ers, simmers en jonghernieuwers</p>
      <p>
        <b>Contact</b>
      </p>
      <p class="spacer">
        <a href="mailto:joepie@ksa.be">joepie@ksa.be</a>
      </p>
    </div>
    <div>
      <img src="http://www.ksa.be/sites/all/themes/custom/tksa/img/logos/logo-blauw.png">
    </div>
  </div>
  <div class="legal">
    <p>
      Deze website kwam tot stand dankzij: Mira Sabbe: lay-out website • Maarten Derous: illustraties • Yann Provoost: ontwikkeling
      website
    </p>
    <p>© 2018 KSA Nationaal - Alle rechten voorbehouden</p>
  </div>
</div>

and the css:

p{
    font-size: 1.8rem !important;
}

.footer {
    width: 100%;
    box-sizing: inherit;
    background-color: $purple;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    p {
        color: white;
    }
    a {
        color: white;
    }
    .info {
        width: 100%;
        box-sizing: border-box;
        padding: 1rem 9rem 1rem 9rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        p {
            margin: 0;
        }
        .spacer {
            margin-bottom: 1.4rem;
        }
    }
    .legal {
        margin: 0 auto;
        box-sizing: border-box;
        padding: 0 9rem 0 9rem;
        width: 100%;
        text-align: center;
    }
}

solution found: set the text-size-adjust property of the p element to none

You know, there is a tool built in the browser called INSPECT ELEMENT and you could see what modifies the p style? — Nicholas, Jul 27 '18 at 08:15
I think the post tagged wrongly, the tags should be Sass not CSS — Code_Ninja, Jul 27 '18 at 08:55

C-Sway · Accepted Answer · 2018-07-27T08:17:52.287

0

Here in a JSFiddle is the code you've given us, behaving as it should, I suspect the error is going to be in a CSS file or tag that you have not let on about, though.

Check your <head>...</head> tag for any linked CSS files that might be forcing a style on any divs with a 'legal' class.

Another option would be to suffix all the elements of the .legal class in the CSS you've shared with !important (and with your P{ ... }, as below;

.legal {
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: 0 9rem 0 9rem !important;
    width: 100% !important;
    text-align: center !important;
}

Also there's a few rogue close-braces at the bottom of your CSS.

edited Jul 27 '18 at 08:17

answered Jul 27 '18 at 08:14

C-Sway

357
1
2
13

I second this. I just copied this over as well, and it seems to work fine with me. – karafar Jul 27 '18 at 08:17
I have renamed to class to something random, and the problem still persists. You can check out the site at: http://thuuzent.ddns.net . It's only in the mobile version that this problem is apparent. – yann provoost Jul 27 '18 at 08:19
What browser do you see it displaying at different sizes? I'm using Chrome 67.0.3396.99 with the window resized to see your mobile version and the text looks the same, both sections being acted upon by the media query setting them to 1.8em instead of the default desktop 1.4em you have in index.css – C-Sway Jul 27 '18 at 08:32
I see a difference using chrome on my mobile phone(I think latest version of it). – yann provoost Jul 27 '18 at 08:37
Thanks for the reply, just to confirm I can see that difference too on my mobile (OnePlus 5t Chrome 68.0.3440.70) – C-Sway Jul 27 '18 at 08:43
Try defining a parent size (in px)for your text for the em to reference. I'm a little rusty but gather that em essentially relates to a given parent size and when that parent size is not defined (I can see no parent definition in your CSS) it can rely on whatever it can find. – C-Sway Jul 27 '18 at 08:53
I tried setting the font-size of the body to 16px. that way rem should reference those 16px. Still the same issue :/ – yann provoost Jul 27 '18 at 08:58
Last roll of the dice. I'm assuming you're using Wordpress or some other CMS for this, reason being the DIV which you have named the class as 'Legal' above is rendering as `
` when I view the source of your document. Is that just you having translated the class for the post or is your CMS trying to push a style on you?
– C-Sway Jul 27 '18 at 09:12
In my sourcecode I changed the classname "Legal" to "einde" to ensure that my CMS (or other imports) isn't pushing a style on me. – yann provoost Jul 27 '18 at 09:19
[what about this](https://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font). Seems like Chrome on Android has form for this. Particularly [this answer](https://stackoverflow.com/a/41983984/2285938) might be helpful for you. – C-Sway Jul 27 '18 at 09:26
1

you sir, are a hero! this has fixed the issue – yann provoost Jul 27 '18 at 09:38

same font-size, different rendered size

1 Answers1