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!).

Thanks Dono, I will try it out later today and hope for the best. 🙂

Ah alright. Thanks Eric. I will check next time.

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.

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.