Stacking 5 list items under each other

Question

I got a template from themeforest. There are some boxes near the bottom of the website (the ones with delivery worldwide etc)

When I make it smaller they dissapear, does anybody know how I can make them stack under each other?

This is the template: http://pixelgeeklab.com/demo/wordpress/flatize/?page_id=579

It's about this part:

<div class="wpb_text_column wpb_content_element ">
    <div class="wpb_wrapper">
        <ul class="wp-ads">
            <li><i class="fa fa-plane"></i><strong>Delivery worldwide</strong>See all conditions</li>
            <li><i class="fa fa-refresh"></i><strong>30 days returns</strong>For a smooth shopping</li>
            <li><i class="fa fa-phone"></i><strong>0123 456 789</strong>Contact Customer</li>
            <li><i class="fa fa-lock"></i><strong>30 days returns</strong>For a smooth shopping</li>
            <li><i class="fa fa-question-circle"></i><strong>Shopping Guide</strong>Contact Customer</li>
        </ul>
    </div>
</div> 

Answer 1

The reason it dissapears is because it is inside <section class="section-element hidden-xs"> so it's display is none when your width < 767px. You should remove the class hidden-xs.

And add this css code.

@media (max-width: 767px){
    .wp-ads li {
         background: #1abc9c;
         color: white;
         display: block; 
         float: none;
         overflow: hidden;
         padding: 20px 0 20px 25px;
         width: 20%;
    }
}

You may want to increase the width when your view is smaller.

For example:

@media (max-width: 767px){
    .wp-ads li {
         background: #1abc9c;
         color: white;
         display: block; 
         float: none;
         overflow: hidden;
         padding: 20px 0 20px 5%;
         width: 90%;
    }
}