Aspire Pro: How Do I Center The Price Plans & Only Use 3?

[vincentpolisi]

Website: Virtual Real Estate Investor Academy

Theme: Aspire Pro

Issue: Demo uses 4 price plans with one highlighted and float left

Need: Only 3 price plans with one highlighted and the price plans centered

Widget Code:

<div class="plans">

<div class="plan">
<i class="fa fa-cloud" style="color: #ccc; font-size: 80px; margin-bottom: 40px;"></i>

<h6 class="uppercase"><strong>Starter</strong></h6>

<div class="price"><sup>$</sup>19<span class="monthly">/mo</span></div>

<small>This is our super Starter Package.</small>

</div>

<div class="plan popular">
<i class="fa fa-globe" style="color: #fff; font-size: 80px; margin-bottom: 40px;"></i>

<h6 class="uppercase"><strong>Popular</strong></h6>

<div class="price"><sup>$</sup>29<span class="monthly">/mo</span></div>

<small>This the Popular Cool Kids Package.</small>

</div>

<div class="plan">
<i class="fa fa-check-circle" style="color: #ccc; font-size: 80px; margin-bottom: 40px;"></i>

<h6 class="uppercase"><strong>Incredible</strong></h6>

<div class="price"><sup>$</sup>49<span class="monthly">/mo</span></div>

<small>This is our Incredible Package.</small>

</div>
<div class="plan">
<i class="fa fa-thumbs-o-up" style="color: #ccc; font-size: 80px; margin-bottom: 40px;"></i>

<h6 class="uppercase"><strong>Awesome</strong></h6>

<div class="price"><sup>$</sup>79<span class="monthly">/mo</span></div>

<small>This is our Awesome Package.</small>

</div>

</div>

style.css code:

/* # Plans
---------------------------------------------------------------------------------------------------- */

.plans {
	margin-top: 60px;
}

.plan {
	background: #fff;
	border: 1px solid #ddd;
	color: #333;
	float: left;
	padding: 60px 20px;
	width: 25%;
}

.popular {
	background: #fa5738;
	border: none;
	color: #fff;
	position: relative;
	transform: scale(1.06);
	-webkit-transform: scale(1.06);
}

.plan h2 {
	font-size: 62px;
	font-weight: 300;
}

.popular h2 {
	color: #fff;
}

.plan .price {
	font-size: 90px;
	font-weight: 400;
	margin: 0 0 20px;
}

.plan sup {
	font-size: 30px;
	top: -1.36em;
}

.plan .monthly {
	font-size: 18px;
}

.plan small {
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
}

.plan-list {
	margin: 0 0 20px;
	overflow: hidden;
}

.plan-list li,
.entry-content .plan-list li {
	list-style: none;
	margin: 0 0 20px;
}

https://academy.virtualrealestateinvestor.org

[CleanPageDom]

Hi Vincent

Did you try changing the width in .plan?

Just messing around in Chrome, if you change that to 33.333333333% it should make the plans 1/3 width as opposed to 1/4. Then you can ditch the fourth plan from the HTML in your widget.

Thanks
Dom

---

Let’s build a website together…

[Author]

Posts