Solved

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

Posted on 2016-11-26
1
73 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

728 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