We must be approaching Halloween…these odd things happening, haha.
First, it’s generally best to not use !important unless you absolutely need to because it can affect other elements globally that you might not realize.
The entry-content container only does the main content area, but not the sidebars. Instead of using entry-content, try:
.site-content {
your styling here
}
Or were you wanting to adjust all content? The rem unit will work from the root size which is the HTML, body at 100% (which is a default browser of 16px). 1.5rem would make the content 24px because 1rem = 16px
As a side note, different browsers and OS’s will display text differently. If I remember correctly, Windows displays at 96 ppi and the MAC displays at 72ppi. Not sure if that has too much effect on your text, but is one possibility if you see a slight difference between the two.
I tried your suggestion and it didn’t have any effect.
Over the weekend the code I was using was working, making the body text close to, but not the same as the sidebar text. The widget text is set at 1.3rem, with the body 1.5rem. This was done using Firefox on the Mac. Now it looks fine on the PC, but not the Mac. I expected to see a difference, but this code was created by and for the Mac.
Now (on the Mac) it is shrinking to where it is on it’s way to needing a magnifying glass unless they manually adjust their screen — and this would cause the sidebar text to blow up, since it looks fine. “>See screenshot That’s the crazy part — the sidebar is fine and following it’s style.
Does that make more sense?
The link to your screenshot wasn’t working, but if things were fine over the weekend, then you need to backtrack to the point where it changed and what was done to change it…then reverse that. Hard for me to see what it looks like on a MAC because I’m not on one, but this sounds like something with custom CSS that might have been done; perhaps using !important (if used) could be causing problems.
By default, the theme sets the content font size from the body:
body {
height: 100%;
font-family: "Open Sans",Helvetica,Arial,sans-serif;
font-size: 0.875rem;
line-height: 1.65;
color: #616161;
font-weight: 400;
background-color: #494d51;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
But you should still be able to apply a custom font size to your content area such as I posted previously. I used that with the browser’s webmaster tools on your site to change the content size.
Again, it’s hard for me to test anything because I’m not on a MAC, so you will need to try and backtrack to the point when it was working and to figure out what was done to change.
Sorry, I’m not too much help on this one as this is falling into more of custom stuff. Again, try not to use !important if you can help it (if you have that anywhere).
It took awhile for me to get back to this, but it’s been resolved. After going through my CSS nothing really stood out as the cause. What I ended up doing was to move the style to the bottom of the file so it would override whatever was causing the problem. This strategy worked 🙂
The really odd thing is that I then had to move the style for the custom background down to the bottom as well. It is now just above the .site-content. I am not going to try to sort that out but thought you might like to hear.
Thanks again for the great support!
What I think happened is that the header text of your plugin wasn’t commented out:
Welcome to Custom CSS!
To learn how this works, see http://wp.me/PEmnE-Bt
So the browser tried and failed to parse that as CSS, and the first defined rule ends up being ignored. Subsequent rules work correctly as the parser figures out what to do. So if you comment out the header text, you should be good to go:
/*
Welcome to Custom CSS!
To learn how this works, see http://wp.me/PEmnE-Bt
*/
A side effect of copy & paste! Thanks for the catch.
