I've been struggling with the "Hobbies and Interests" section of my project. Here is a screenshot for reference: https://i.sstatic.net/ZjShg.png. The issue lies in the unordered list where font awesome icons are used as bullets. I aim to divide it into two columns while ensuring responsiveness, meaning the gap between the columns adjusts smoothly and the icons and text stay intact without wrapping onto new lines as they currently do.
<section id= "skills">
<h3 class="text-center pt-3 pb-3"><strong> Ready to tackle any challenge. Proven by performance.</strong></h3>
<div class="container containerPadding">
<div class="row">
<div class="col-sm-4 ">
<!--- Instruments -->
</div>
<div class="col-sm-6 offset-sm-2 ">
<div class="container float-center">
<h1 class="text-center pt-5 ez-animate" data-animation="bounce"><strong>Hobbies and Interests</strong></h1>
<div class="row">
<div class="col" style="column-count: 2; column-gap: 15em;">
<ul class="barbie list-unstyled">
<li class= "barbieitem pb-2 pt-2 puzzle text-left ">Puzzles</li>
<li class= "barbieitem pb-2 pr-4 plane text-left">Travel</li>
<li class= "barbieitem pb-2 wrench text-left">Handy Work</li>
<li class= "barbieitem pb-2 plane text-left">Travel</li>
<li class= "barbieitem pb-2 volunteer text-left">Volunteering</li>
<li class= "barbieitem pb-2 car text-left">Automobiles</li>
<li class= "barbieitem pb-2 plane text-left">Travel</li>
<li class= "barbieitem pb-2 camera text-left">Photography</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
dt {font-size: 1.3em;position:relative;}
dt:not(:first-of-type) {margin-top: 2em}
dt:before {
content: "";
font-family: FontAwesome;
left: -40px;
// position:absolute;
top: 5px;
display: inline-block;
margin-right: 8px;
}
dt.achievement:before {
content: "\f091";
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
/* Rest of CSS code remains unchanged for functionality */