List column won't push border down?

0 votes
asked Sep 13, 2017 by xanderburgess

When the window is smaller, text on the first line:

"FILE FORMATS (XLS, XLSX, CSV OR OTHER DELIMITED, ODS)"

doesn't push the separating border down with it.

Screenshot of problem.

enter image description here

CSS:

.pricing-features-item { border-top: 2px solid #000000; font-size: 10px; line-height: 1.5; padding: 15px 0; text-transform: uppercase; text-align: left;
}
.col-tick { float: left; width: 10px;
}
.col-text { float: left; width: 90%;
}

HTML:

 <ul class="pricing-features"> <li class="pricing-features-item"> <div class="col-tick"> + </div> <div class="col-text"> File formats (xls, xlsx, csv or other delimited, ods) </div> </li> <li class="pricing-features-item">Dashboard hub</li> <li class="pricing-features-item">Data filters and validation</li> <li class="pricing-features-item">Premium data layout templates</li> </ul>

How can i fix this?

If you could fix it here and send the link would be awesome :)

https://jsfiddle.net/nusmsegn/2/

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...