Glitch when viewing from computer to mini-window(smartphone)

 <div id="icons" style= "color: white;font-size:18px;padding-bottom:350px;padding-left:250px;padding-top:50px">

    <div class="col-lg-2 col-sm-6 col-md-2 col-xs-6">
            <i class="fa fa-laptop fa-4x " style= "font-size:100px;"></i>
            <hr style="width: 110px;margin-right:1300px;"> 
        You will be able <br>to leave a comment<br> anywhere!
        </div>


 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-6" style= "margin-left:30px;">
            <i class="fa fa-commenting-o fa-4x " style= "font-size:100px;"></i>
            <hr style="width: 110px;margin-right:1300px;"> 
        All you need to do <br>is highlight your text
        </div>      

<div class="col-lg-2 col-sm-6 col-md-2 col-xs-6" style= "margin-left:30px;">
            <i class="fa fa-pencil-square-o fa-4x " style= "font-size:100px;"></i>
            <hr style="width: 110px;margin-right:1300px;"> 
         Then click right and edit!
        </div>      

 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-6 " style= "margin-left:30px;">
            <i class="fa fa-check-square-o fa-4x " style= "font-size:100px;"></i>
            <hr style="width: 110px;margin-right:1300px;"> 
        It's a top A edit, <br>enjoy it on your handheld <br>or computer devices.
        </div>          

</div>

Open in new window


I have the code above, the output is this(image1):
image1But when I make my window smaller (since I want to view it on my smartphone) I get this
image2
    <div id="icons" style= "color: white;font-size:18px;padding-bottom:350px;padding-left:250px;padding-top:50px">

    <div class="col-lg-2 col-sm-6 col-md-2 col-xs-6">
            <i class="fa fa-laptop fa-4x " style= "font-size:100px;"></i>
            <hr style="width: 110px;margin-right:1300px;">
        You will be able <br>to leave a comment<br> anywhere!
        </div>


 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-6" style= "margin-left:30px;">
            <i class="fa fa-commenting-o fa-4x " style= "font-size:100px;"></i>
            <hr style="width: 110px;margin-right:1300px;">
        All you need to do <br>is highlight your text
        </div>      

<div class="col-lg-2 col-sm-6 col-md-2 col-xs-6" style= "margin-left:30px;">
            <i class="fa fa-pencil-square-o fa-4x " style= "font-size:100px;"></i>
            <hr style="width: 110px;margin-right:1300px;">
         Then click right and edit!
        </div>      

 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-6 " style= "margin-left:30px;">
            <i class="fa fa-check-square-o fa-4x " style= "font-size:100px;"></i>
            <hr style="width: 110px;margin-right:1300px;">
        It's a top A edit, <br>enjoy it on your handheld <br>or computer devices.
        </div>          

</div>
I have the code above, the output is this(image1): image1

But when I make my window smaller (since I want to view it on my smartphone) I get this (image2): image2

I tried vertical aligning them, but nothing seemed to work, As you can see I need the padding so they won't be stuck to one another, is there any way I can fix this glitch?
LVL 1
Jazzy 1012Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Marco GasiConnect With a Mentor FreelancerCommented:
The problem is that you are putting 4 columns set as col-2, but 2 x 4 = 8: with Bootstrap the sum of columns must always be 12.
With following style you get something similar to what you want. You probably have to play with it a bit to fit the res of your markup, but I think this could put you in the right way.
		<style>
			.icons{
				background: #0099ff; 
				color: white;
				font-size:18px; 
				padding: 50px 0 350px;
			}
			.icon{
				margin: 0 30px;
				padding-left: 5px;
				padding-right: 5px;
			}
		</style>

Open in new window


html
		<div class="row">
			<div class="col-xs-2"></div>
			<div class="col-xs-8 icons">


				<div class="col-lg-2 col-sm-6 col-md-2 col-xs-6 icon">
					<i class="fa fa-laptop fa-4x " style= "font-size:100px;"></i>
					<hr style="width: 110px;margin-right:1300px;"> 
					You will be able <br>to leave a comment<br> anywhere!
				</div>


				<div class="col-lg-2 col-sm-6 col-md-2 col-xs-6 icon">
					<i class="fa fa-commenting-o fa-4x " style= "font-size:100px;"></i>
					<hr style="width: 110px;margin-right:1300px;"> 
					All you need to do <br>is highlight your text
				</div>      

				<div class="col-lg-2 col-sm-6 col-md-2 col-xs-6 icon">
					<i class="fa fa-pencil-square-o fa-4x " style= "font-size:100px;"></i>
					<hr style="width: 110px;margin-right:1300px;"> 
					Then click right and edit!
				</div>      

				<div class="col-lg-2 col-sm-6 col-md-2 col-xs-6 icon">
					<i class="fa fa-check-square-o fa-4x " style= "font-size:100px;"></i>
					<hr style="width: 110px;margin-right:1300px;"> 
					It's a top A edit, <br>enjoy it on your handheld <br>or computer devices.
				</div>          


			</div>
			<div class="col-xs-2"></div>

		</div>

Open in new window


Testing page here: http://test.webintenerife.com/test-responsive.html
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.