CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Hamed Minaee
Hamed Minaee

Reputation: 2560

bootstrap grid system does not work on all devices size

I am facing a very strange issue with bootstrap. As far as I know bootstrap grid system is based on 12 units and works with any device size such as i-phone... I have a very simple banner which consists of 5 columns as follows:

col-xs-1 | col-xs-1 | col-xs-8 |col-xs-1| col-xs-1

So I expect that all of the above columns fit into the row since in total they are 12. As you can see in the fiddle I provided when I use chrome emulator and put it on something like iphone 5 the last column goes to the next row and it does not fit the row.

code(I used w3school editor since when I use jsfiddle and code pen to add meta tag they do not apply it and the editor in w3school was the only one could replicate my problem

For more explanation this only happens when I add the following meta tag into my page:

<meta name="viewport"
content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Now it is a big issue for me and I am stuck since this is a base of my layout and I want to make sure the base is set up correctly. Can anyone help?

*********************MY CODE*****************************

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-     scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-   BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-    theme.min.css"
integrity="sha384-  rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">        </script>
<!-- Latest compiled and minified JavaScript -->
 <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-  Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>

   <style>
   /*----------------------HEADER ---------------------------------------------------------  */
 .header {
font-weight: bold;
background-color: #4070CB;
color: #EFF0F2;
height: 100px;
padding-top: 15px;
}

.col {
padding: 0 0 0 0;
}

.header a {
color: white;
font-size: 5vw;
}

.txt-align-right {
   text-align: right;
}

.txt-align-left {
  text-align: left;
 }

.txt {
  align-items: center;
    display: flex;
  text-align: center;
  justify-content: center;
}

.font-size-xs {
   font-size: 4vw;
 }
 </style>
 </head>
 <body>
<div id="mainContainer" class="container-fluid">
    <!-- Header -->
    <div class="row">
        <div class="col-xs-12 header">
            <div class="col-xs-1"></div>
            <div class="col-xs-2 txt-align-left">
                <a href="#" id="menuClick"> <span
                    class="glyphicon glyphicon-align-justify"></span>
                </a>
            </div>
            <div class="col-xs-6 txt font-size-xs">TTTTTT-TTTTT</div>
            <div class="col-xs-2 txt-align-right">
                <a href="#"> <span class="glyphicon glyphicon-phone"></span>
                </a>
            </div>
            <div class="col-xs-1"></div>
        </div>
    </div>


</div>


</body>
   </html>

Upvotes: 1

Views: 3247

Answers (2)

Konstantin Kreft
Konstantin Kreft

Reputation: 623

I think I accomplished what you are looking for.

I edited your example. You can take a look here.

I got rid of the padding bootstrap adds to the columns so everthing should fit on the screen even on smaller resolutions. You should take a look at your center column. You could try adding a min-height so it should behave normal on lower screen resolutions.

Also I changed the first column to an offset. Take a look at the bootstrap docs.

Technically you can get rid of the last column. You don't have to add up to exact 12 columns. You should think of it as max. 12 columns. With an column offset of 1 und the following 10 columns you are good to go.

Instead of

<meta name="viewport"
content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

You can go with

<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">

You don't need to set everything to 1.0 you can simply set user-scalable=no and remove ´minimum-scale=1.0´

Upvotes: 2

R. P&#252;lsinger
R. P&#252;lsinger

Reputation: 165

In bootstrap there are four different "grid-sizes". The only one you use is "xs" what means <576px.

If you want to use this grid in every sizes, you have to add "col-sm-?", "col-md-?", "col-lg-?" and "col-xl-?".

Here you can read how the grid-system in bootstrap work:

https://v4-alpha.getbootstrap.com/layout/grid/

I think your problem at this point is content which is bigger than its parent. For the col-xs-1 you do have round about 27px on an iPhone 5. If your content in this div is bigger than 27px it will bigger your parent-div (col-xs-1) and there isnt enough space for 12 columns anymore. (content could be text, too!)

To avoid that it will get bigger, you could use overflow:hidden; in your style. This will cut the overflow to the size of your parent-div.

Upvotes: 0

Related Questions