Community Forums › Forums › Archived Forums › Design Tips and Tricks › Aspire Pro: How Do I Center The Price Plans & Only Use 3?
This topic is: not resolved
Tagged: aspire pro
- This topic has 1 reply, 2 voices, and was last updated 7 years ago by CleanPageDom.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorPosts
-
April 26, 2017 at 7:41 am #205341vincentpolisiMember
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:
https://academy.virtualrealestateinvestor.org/* # 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; }
April 26, 2017 at 12:45 pm #205374CleanPageDomParticipantHi 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
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.