Click here for a snapshot of ticks
Greetings,
I need some help with aligning blue ticks on the left side instead of above the text as shown in the screenshot.
Below is my code snippet, excluding ionicons v2 font () :)
If more information is required, please don't hesitate to ask.
Thank you!
.section-monthly-donations {
background-color: #434343;
}
.plan-box {
background-color: #696969;
border-radius: 5px;
width: 90%;
margin-left: 5%;
}
.plan-box div {
padding: 15px;
border-bottom: 1px solid #424242;
}
.plan-box div:last-child {
text-align: center;
}
.plan-price {
font-size: 190%;
margin-bottom: 10px;
font-weight: 200;
color: #00BFFE;
}
.plan-price span {
font-size: 70%;
font-weight: 300;
}
.plan-box ul {
list-style: none;
}
.plan-box ul li {
font-size: 70%;
padding: 5px 0;
}
.row {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.row:before,
.row:after {
content:"";
display:table;
}
.row:after {
clear:both;
}
/* GRID COLUMN SETUP ==================================================================== */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
/* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {
/*margin: 1% 0 1% 0%;*/
margin: 0;
}
}
/* GRID OF THREE ============================================================================= */
.span-3-of-3 {
width: 100%;
}
.span-2-of-3 {
width: 66.13%;
}
.span-1-of-3 {
width: 32.26%;
}<section class="section-monthly-donations">
<div class="row">
<h2>Make a monthly donation commitment</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="plan-box">
<div>
<h3>Gold</h3>
<p class="plan-price">£200+ <span>monthly path</span></p>
</div>
<div>
<ul>
<li><i class="ion-checkmark-round icon-small"></i>Signed letter from the team</li>
<li><i class="ion-checkmark-round icon-small"></i>Exclusive access to ...</li>
<li><i class="ion-checkmark-round icon-small"></i>Special ...</li>
<li><i class="ion-checkmark-round icon-small"></i>Leo eget bibendum Sed consequat</li>
</ul>
</div>
<div>
<a href="#" class="btn btn-full-light">Make a pledge now</a>
</div>
</div>
</div>
</div>
<section>