Mona Mona - 23 days ago 11
CSS Question

How to make 3 columns mobile friendly?

I was trying to figure it out on my own, but didn't work well for me.
I am using bootstrap and trying to make proper version for mobile users.
Now it looks horrible on mobile devices.
I think problem is with div classes i was trying to change them, but didn't help me that much.

Here is my code:

<div class="container">
<div class="row">
<div class="col-xs-4 content">
<ul class="featuresBody">
<li><i class="icofont icofont-simple-right"></i>Unlimited Domains & Subdomains</li>
<li><i class="icofont icofont-simple-right"></i>Ulimited Email Addresses</li>
<li><i class="icofont icofont-simple-right"></i>Unlimited Databases (MySQL)</li>
<li><i class="icofont icofont-simple-right"></i>Unlimited Bandwidth</li>
<li><i class="icofont icofont-simple-right"></i>SSH, sFTP/FTP acess</li>
</ul>
</div>
<div class="col-xs-4 content">
<ul class="featuresBody">
<li><i class="icofont icofont-simple-right"></i>PHP 5/7, Perl 5, Python, Zend, phpMyAdmin</li>
<li><i class="icofont icofont-simple-right"></i>One Click CMS Install</li>
<li><i class="icofont icofont-simple-right"></i>Cron Job Manager</li>
<li><i class="icofont icofont-simple-right"></i>SSL Certificate</li>
<li><i class="icofont icofont-simple-right"></i>POP3, IMAP, SMTP For E-Mail</li>
</ul>
</div>
<div class="col-xs-4 content">
<ul class="featuresBody">
<li><i class="icofont icofont-simple-right"></i>Daily Backups</li>
<li><i class="icofont icofont-simple-right"></i>Detailed Logs & Statistics</li>
<li><i class="icofont icofont-simple-right"></i>Protection From Viruses</li>
<li><i class="icofont icofont-simple-right"></i>Advanced DDoS Protection</li>
<li><i class="icofont icofont-simple-right"></i>24/7 Support</li>
</ul>
</div>
</div>
</div>


Thanks!
P.S How can i easily test pages on mobile devices?

Answer

When using Bootstrap, the col-xs class means that the column, and whatever it has inside it, will be squished as much as necessary to fit the contents on a mobile phone. When you have 3 columns side by side on your desktop or lap top monitor, that makes sense, because each of the 3 columns is big enough for you to read it. If this is the case with your situation (which I think it is), consider changing these col-xs to col-md or even col-lg. This will cause the columns not to be squished to fit the mobile screen, but instead, they will stack on top of each other so that you see the left-most column first, then scroll down, you see the one in the middle, and then further below, you see the right column.

Comments