Homepage › Community Forums › Epik Theme Support › Epik v1.5 text size
Hi,
I am running Epik on 2 sites, however one site is running Epik v1.5 and I have a problem with the text size.
The text size on this version is huge, and I can’t seem to change it to display the same as it was in version 1.4.
Could you please help me get the font size the same as it was before I upgraded to v1.5?
Many thanks,
Tom
Do you have a link I can take a look at?
Which text are you looking to get changed?
Hi Wes,
Sure. Here is a site I have running v1.4: http://diycamperconversion.com/ the main text inside the widgets, as well as the main body text in posts/ pages in this version is a perfect size for me.
However, on the site running v1.5 (http://www.tomweyers.com/) the text is considerably larger, both in the widgets and in the main body content of the pages.
In short, I’d like the text in v1.5 to be the same size as it is on my site running v1.4 (without having to roll back to v1.4, as I like the features v1.5 has)
If you look on line 150 in your style.css, you can change the size from 20px/2.0rem to 18px/1.8rem like this –
body > div {
font-size: 18px;
font-size: 1.8rem;
}
If you want to change the color to Gray in that section, look at line 2068 and change the color to #ccc –
.welcome {
background: #303236;
clear: both;
color: #ccc;
margin: 0 auto;
text-align: center;
}
Since your Titles are h3 now (instead of h4) you can add this to have it look exactly like the previous version –
.welcome h3 {
color: #fff;
font-size: 36px;
font-weight: 300;
line-height: 46px;
}
If you want to add more titles, like h2, h4, etc then you can add them in the same way as above….or you can group them all in together if you want.
Let me know if I missed anything or if you have any other questions.
Hi Wes,
Thanks for getting back to me so quickly.
That was actually the first thing I tried before submitting this thread. I tried changing it to a few different font sizes but none worked.
For example, when I change it to:
font-size: 18px;
font-size: 1.8rem;
although smaller, it is still appearing ‘bold’, changing it to 1.7rem makes it way too small, 1.74 is the highest it can go without appearing ‘bold’, anything 1.75rem and up the text appears as bold.
Please look at these 3 screenshots, I used the same text on both sites, and changed the css as you suggested, but the text still isn’t the same size.
v1.4 – the way I’d like the new site to display: http://www.tomweyers.com/wp-content/uploads/diyc.png
v1.5 with your suggested edits to 18px, 1.8rem: http://www.tomweyers.com/wp-content/uploads/tw1.8rem.png
v1.5 18px, 1.74rem – text displaying too small: http://www.tomweyers.com/wp-content/uploads/tw1.74rem.png
I hope this makes sense. I spent quite some time trying different font sizes without any luck. The only other obvious thing I could notice was the font family being different, however changing this also didn’t work.
Thanks,
Tom
P.S Thank you for the suggestions with the titles and background color, very helpful indeed 🙂
Here’s what shows for me – https://i.imgur.com/jU3Tra8.png
The only thing I changed was the size and the color. I didn’t need to change the font weight.
BTW, which browser are you using?
Hi Wes,
That looks great, but unfortunately I’m not able to replicate it.
I’m using Chrome on Windows 7 (and also checked it with IE, which is the same). Can you please tell me what exactly you changed to get it to display like that so I can try it out?
Many thanks,
Tom
I only added a font-size and color to the code I posted above – https://appfinite.com/topic/epik-v1-5-text-size/#post-22213 The font-weight is already 300 on my end so I didn’t need to add anything for it.
I’m using Chrome on a Mac, but I also checked other browsers as well and it still shows up at the same font-weight (300).
Even though it’s already showing up at 300 font-weight on my end, I guess you could still try and add it directly to the .welcome
section in your CSS to see if that makes a difference on yours.
Make sure and click your reload button anytime you make a change to your CSS file so the changes/adjustments show up instantly on your browser…..(it clears the Browser Cache when you do this)
Hi Wes,
I changes the font size and color like you mentioned, cleared cookies and cache and refreshed, but still not displaying for me like it is in your screenshot.
Please see here: http://www.tomweyers.com/wp-content/uploads/tw1.8.png
Just a side note, this is the same on main body content (example: http://www.tomweyers.com/about/), it’s not just the widget area where the text is displaying like this.
Just a question, Which Mac are you using? if it’s an 11″ (or perhaps even 13″), it could be why it displays smaller for you, on my 15″ laptop it displays large, yet on the iPad it displays like your screenshot.
Not sure why this is, but I thought I’d mention it in case you can shed some light on it.
Best regards,
Tom
I’m researching what would cause the font-weight to show up differently on a PC. I’m sure there’s a quick solution, I just need to figure out what it is.
What if you add this to your body
in the CSS – -webkit-font-smoothing: antialiased;
Which would look like this –
body {
background-color: #fff;
/*background-color: #f2f2f2;*/
color: #333;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-size: 1.125rem;
font-weight: 300;
line-height: 1.625;
margin: 0;
-webkit-font-smoothing: antialiased;
}
Not sure if that will make a difference in the other browsers, but let’s start with Chrome first to see if something changes.
“Just a question, Which Mac are you using? if it’s an 11″ (or perhaps even 13″), it could be why it displays smaller for you, on my 15″ laptop it displays large, yet on the iPad it displays like your screenshot.”
I checked your site on multiple screen sizes and it still shows up the same. I’m currently viewing on a 23 inch monitor with a 13″ MBP. We also have a 24 inch iMac that I sometimes test with as well. I always make sure to resize the browser so I can see how different browser sizes will display the site.
The main body also looks great here on this link – http://www.tomweyers.com/about/ Just need to figure out what’s missing for PC