I am creating a Blog, and custom Theme, using Wordpress for my existing site. I am trying to get it to match exactly the look and feel of the main site, so I logically just copied over all the CSS...

Most of my size definitions are based on em. I am seeing a very large size discrepancy on elements which have em definitions for their size.

Live examples: Home page: http://letsdolunch-web-dev.azurewebsites.net/ Blog: http://letsdolunch.today/blog

You can see the difference clearly if looking at the header and footer. The header/foot height is defined by em, as well as the text size, and padding of the items which is off for the navbar links and left footer text.

I am working off an Underscores template, and found the only relevant CSS below, which all looks legit.

color: #404040;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
  1. Why is my em sizing on the Wordpress site significantly smaller than it should be?

closed as off-topic by anu, Pieter Goosen, Robert hue, cybmeta, birgire Feb 17 '15 at 9:27

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • 2
    what are you comparing to what? the p tags on the other site are inheriting styles from parent elements. this isn't a WordPress issue, it's an issue with your css and markup. – Milo Feb 16 '15 at 20:33
  • @Milo the height of the header, the text side of everything, the padding above the navbar links, the footer height, the padding above the left footer text. All of those are defined by em, and show up completely different on the main site versus the Wordpress site. – Joshua Ohana Feb 16 '15 at 21:01

From the spec: "EM is Equal to the computed value of the ‘font-size’ property of the element on which it is used."

You have a different font-size value between the two URLs you provided (14px and 10px respectively).

Line 273 of your style.css file is replacing the default Bootstrap font-size for the body element (line 5 of bootstrap.min.css).

Not the answer you're looking for? Browse other questions tagged or ask your own question.