You can see it on the Epik demo when you go to a post. Especially if you compare the same post in Firefox or IE.
The font looks jagged and thinner than what it’s supposed to be. I managed to get it to look less jagged with the SVG trick but the font was still too thin to read for a long period of time. In Firefox it’s nice and dark and there’s good contrast though. Even on my phone it looks great.
In the end though I decided to live with the jaggedness since it’s not that bad but now I specifically say to use a font weight of 400 instead of 300 in the body when the browser is Chrome. It probably looks more pleasing to the eye with a font weight of 300 but it makes for easier reading with the higher font rate.
http://demo.appfinite.com/epik/sample/sub-page-11/
http://hostingweb.co.za/privacy-policy/
I apologise for the state of my site. I’m still working on it. 馃檪 However you can compare the two pages in Chrome to see the difference. And see how it looks in Firefox (so pretty!).
Whew after a lot of struggle and trying out a lot of different things I just can’t get it right. The only time I get it to look good in Chrome is when it looks bad in Firefox.
I will look at it again tomorrow but for now it looks like something that Chrome will just have to fix. Unfortunately it’s not that comfortable to read an Epik post in Chrome on Windows at the moment because the text is not that clear. So I’m wondering if a reader will stay for 1000 words if the text isn’t easy to read.
Then again, I may be over analyzing things. Also, maybe Chrome users are used to bad fonts by now.
Thanks Dono, I will try it out later today and hope for the best. 馃檪
Chris, even though it’s a bit of a shortcut, I used a plugin to change the footer.
That way it’s much easier to change it.
Ah alright. Thanks Eric. I will check next time.
Hi Eric,
The strange thing is that it was between tags. I must have done something wrong. Unfortunately it's not possible to preview before posting or to edit a post afterwards. Luckily someone fixed it now.
I’m very glad to say that I got it right! Some time away from the computer helped a lot.
For people who want to do something similar in the future:
I added some css code for three columns and changed the existing one to four columns:
.plan-col-four,
.plan-col-popular-four {
width: 25%;
}
.plan-col-three,
.plan-col-popular-three {
width: 33%;
}
Then in code if I want to use three columns I would do the following:
<div class="plans">
<div class="plan-col plan-col-three">
<div class="plan-col-wrap">
<div class="plan-head"><h4>Simple</h4></div>
<div class="plan-pricing">
<span class="plan-price"><sup>$</sup>45</span><span class="monthly">/mo</span>
</div>
<ul class="plan-list">
<li><strong>100</strong> Themes</li>
<li><strong>Unlimited</strong> Bandwidth</li>
<li><strong>300</strong> E-mail Accounts</li>
<li><strong>Free</strong> 1-800 Number</li>
<li><strong>5 Free</strong>Domains</li>
<li><strong>Unlimited</strong> Downloads</li>
</ul>
<div class="plan-button"><a>Buy Now</a></div>
</div>
</div>
<div class="plan-col-popular plan-col-popular-three">
<div class="plan-col-wrap">
<div class="plan-head"><h4>Popular</h4></div>
<div class="plan-pricing">
<span class="plan-price"><sup>$</sup>59</span><span class="monthly">/mo</span>
</div>
<ul class="plan-list">
<li><strong>200</strong> Themes</li>
<li><strong>Unlimited</strong> Bandwidth</li>
<li><strong>300</strong> E-mail Accounts</li>
<li><strong>Free</strong> 1-800 Number</li>
<li><strong>5 Free</strong>Domains</li>
<li><strong>Unlimited</strong> Downloads</li>
</ul>
<div class="plan-button"><a>Buy Now</a></div>
</div>
</div>
<div class="plan-col plan-col-three">
<div class="plan-col-wrap">
<div class="plan-head"><h4>Great</h4></div>
<div class="plan-pricing">
<span class="plan-price"><sup>$</sup>99</span><span class="monthly">/mo</span>
</div>
<ul class="plan-list">
<li><strong>300</strong> Themes</li>
<li><strong>Unlimited</strong> Bandwidth</li>
<li><strong>300</strong> E-mail Accounts</li>
<li><strong>Free</strong> 1-800 Number</li>
<li><strong>10 Free</strong>Domains</li>
<li><strong>Unlimited</strong> Downloads</li>
</ul>
<div class="plan-button"><a>Buy Now</a></div>
</div>
</div>
</div>
<!--formatted-->
One can then do something similar for two columns and so forth.
I’m getting a little bit closer. 馃檪
I’ve added:
.plan-col-three,
.plan-col-popular-three {
width: 30%;
}
and that makes the columns a bit wider. Unfortunately they aren’t showing next to each other anymore. Will tinker some more though.
Thanks Eric, I added the !important bit to some places and now it looks better than what it did.
For some reason the price plans are all still grouped to the left though with a space on the right. As if they are not resizing to the width that they can be.
Is there a way to get them to resize to fit the page?
Thank you very much for your help. I know you are helping out even though it’s not your product and that’s great of you. It’s very much appreciated.