Solved

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

Posted on 2016-11-26
1
48 Views
Last Modified: 2016-11-28
 <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?
0
Comment
Question by:Jasmine Ikhreishi
1 Comment
 
LVL 31

Accepted Solution

by:
Marco Gasi earned 500 total points
ID: 41902863
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

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now