markup:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2" style="height: 100px; background-color: red;"></div>
</div>
<div class="row">
<div class="col-md-12" style="height: 100px; background-color: blue;"></div>
</div>
</div>
When i'm lowering browser width col-md-12 is scaled down to fit width. For each screen width range col-md-12 width is less than range before.
But it's not the same with col-md-8 col-md-offset-2. First width is lowered but then increased. To illustrate the problem i have prepared screenshot: http://i.imgur.com/sRENpiW.png
I suspect that it's "by default", but maybe you have encountered this problem and got solution? I would like col-md-8 to act like col-md-12.
col-md-8 col-md-offset-2 means "When the width is medium or higher, make the div 8 out of 12 columns wide and push it two across so it is in the middle".
When you return the window width to small, then you no longer have any rules, so it goes to being the full width.
If you want to specify a width for when it it small, then do so. Use sm instead of md.
Related
I'm having trouble with making some of my div elements responsive.
The image with the magnifying glass is refusing to resize when the window is smaller, for example on a ipad. I have tried other methods of resizing but resulting in failure.
Website link: http://onlinestaff.net
Problem: The magnifying-glass-image on your website uses the attribute max-width:none which causes the image to be displayed in full size even on smaller screens.
Solution: When making images responsive we usually use the CSS attribute max-width:100% to ensure that big images scale down to fit on the screen (or better: fit into the parent container)
You can try something like this to make divs responsive and their position relative to the size of screen:
<body>
<div class="container">
<div class="row row-centered pos">
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
</div>
</div>
</body>
So, im using bootstrap 3.0, and working on columns, and im having problem with column heights.
My desired output is to have white border in between column, i was able to achieve this on columns with same height, but if the columns is shorter in height, the border is short also,
I tried setting the columns' height to 100%, but is doesnt work, setting the column's height via exact px (100px) works, but i cant use this since i need the column height to be responsive
Here is my html code
<div class="col-xs-12 bg-8560a9">
<div class="col-xs-4 text-left border-right-white full-height">Europe Zone 1 (West)</div>
<div class="col-xs-4 border-right-white full-height">
<div class="col-xs-6">794 M</div>
<div class="col-xs-6">81.6%</div>
</div>
<div class="col-xs-4 full-height">
<div class="col-xs-6">833 M</div>
<div class="col-xs-6">83.5%</div>
</div>
</div>
css
.full-height{height:100% !important;}
This is the common Problem that occurs when parent element don't have there heights set, height and width don't behave same for Browser,you can skip setting width but for element height this is generic issue
suppose your parent element has height: auto; and setting percentage height to children will
confuse browser to calculate height for element from an undefined value,since it is null so browser will do nothing.
you need to add
<div class="col-xs-12 bg-8560a9 full-height">
<div class="col-xs-4 text-left border-right-white full- height">Europe Zone 1 (West)</div>
<div class="col-xs-4 border-right-white full-height">
<div class="col-xs-6">794 M</div>
<div class="col-xs-6">81.6%</div>
</div>
<div class="col-xs-4 full-height">
<div class="col-xs-6">833 M</div>
<div class="col-xs-6">83.5%</div>
</div>
</div>
this will again work only if parent element height is set,
full reference to this problem is here
So, if you want to set a height on your web pages to a percentage, you have to set the height of every parent element of the one you want the height defined.
I currently have 3 buttons that are inline. I'm having issues in how to style these buttons so the width is automatically calculated to take the width of the parent div. For example, if the parent div is 1000px, I'd like the width of the inline buttons to be 1000/3 - a set margin to space these buttons. So those need to be taken into account which will be fixed. Catch is, the first and last element should not have a left margin and right margin respectively. This way I can dynamically add buttons and the styling should take care of the width. Hope that helps?
JsFiddle
HTML:
<div class="row" style="width: 1000px;border: 1px solid #999;">
<div class="row" style="padding-bottom:20px;">
My Button
My Button2
My Button3
</div>
</div>
You could use a table as so:
<table style="width:100%;">
<tbody style="width:inherit;">
<tr>
<td>Left</td>
<td>Centre</td>
<td>Right</td>
</tr>
</tbody>
</table>
And then add as many <td> elements as needed.
Assuming you are ignoring bootstrap standards, and wanting to custom style this.
try
.row {
/*width: 1000px;*/
border: 1px solid #999;
}
.row .row {
padding-bottom: 20px;
margin 0 -10px; /*offset the left and right gutter*/
}
.btn-default {
display: block;
float: left;
text-align: center;
margin: 10px; /*example margin*/
padding: 30px;/*example padding */
/*width: 30%;*/ /*fall back if needed*/
width: Calc((100% / 3) - 20px); /*minus 2 x margin*/
}
JSFiddle
KingKongFrog. Hi again. When you set a width to a fixed value like 1000px you lose the ability to be responsive. Try to use percentage. When using Bootstrap the xs starts around 700px, if you have say 3 buttons side by side you can run into problems fitting them across a small screen like 320px.
So you need to take over control from bootstrap css a little to do want you want to do.
I have added some of the bootstrap classes and also added some more custom classes to help show what you may need to do here.
Using #media (max-width: 320px) is the main width that you may need to control like reducing the size of the buttons/fonts etc. And if using any col-xs-offset-X when it shown on a screen size within 320px you will need to reset these to zero left etc.
Custom css that you want/need to over ride Bootstrap needs to be placed below bootstrap in the page.
Have a look at the Fiddle here and try resizing it.
Here is a full screen fiddle view that's easy for resizing.
<br>
<div class="container bg-info">
<br>
<div class="col-lg-12 bg-warning">
<br>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3
col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-xs-offset-2
col-xxs-pull-1">
My Button1
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3
col-lg-offset-0 col-md-offset-0 col-sm-offset-1 col-xs-offset-0
.col-xxs-offset-1">
My Button2
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3
col-lg-offset-0 col-md-offset-0 col-sm-offset-1 col-xs-offset-0
col-xxs-push-1">
My Button3
</div>
<br><br>
</div>
<br>
</div>
If you are working with bootstrap, you have to understand the grid system. There is col-xs-..., col-sm-..., col-md-..., col-lg-... to handle the column width. Therefore don't set a width. Read bootstrap grid options to understand the basics. A whole width of the screen has in total 12 columns. For example col-xs-12 in smaller displays fills the whole width.
HTML
<div class="row">
<div class="col-..."></div>
<div class="col-..."></div>
<div class="col-..."></div>
</div>
<div class="row myButtons">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
My Button
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
My Button2
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
My Button3
</div>
</div>
Here in all device sizes every part has 4 columns. In total 12. (Set, for example every cols-xs-4 to col-xs-12 and resize the screen to see what happens!). That's how bootstrap work.
Example
I'm trying to reorder the columns on my website via Bootstrap's method of reordering columns depending on the screen size which works fine for most of the responsive layouts I'm testing apart from 1.
The layout having problems is the Tablet Landscape Layout (1024 x 768) which displays like this:
Every other screen displays the blue div and the right div either with the red div on top if the screen is too small or on the right with the blue div aligning itself exactly next to it if the screen is large enough.
This is the code I'm using right now:
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row clearfix">
<div class="col-xs-12 col-sm-12 col-md-push-8 col-md-4 col-lg-push-8 col-lg-4 col-xl-push-8 col-xl-4" style="background: red">
Basket
</div>
<div class="col-xs-12 col-sm-12 col-md-pull-8 col-md-8 col-lg-pull-4 col-lg-8 col-xl-pull-8 col-xl-8" style="background: blue">
News
</div>
</div>
</div>
</div>
Does anyone know why the blue div is so far to the right on the Tablet Landscape layout rather than touching the red div like it should?
Some general markup issues:
First of all, there's no col-xl-*, so you can get rid of those.
Secondly, you don't need col-xs-12, since the default is for it take up the whole width unless otherwise specified.
Third, Bootstrap is mobile first, so larger sizes will override the existing smaller sizes, meaning if you don't intend on changing something, there's no need to specify the larger size again.
The actual issue is that col-*-pull-* is relative to where the element would be placed. Bear in mind, you haven't changed anything in the document flow. So the elements are positioned normally and then phase shifted with left or right. Since the blue container would normally start 4 columns over, you only need to pull it back by 4 columns, instead of 8.
The whole thing can be rewritten like this:
.red { background: red }
.blue { background: blue }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-4 col-md-push-8 red"> Basket </div>
<div class="col-md-8 col-md-pull-4 blue"> News </div>
</div>
</div>
Ok I'm probably missing something really simple here but I can not figure out why my cols are acting like this using twitter bootstrap. This happens when I resize the browser to about 323px. I have no other css styles or html on the page. I have attached 2 screen shots for reference.
I have my columns set accordingly but when I resize the browser to the smallest size it drops the last col-xs-1 down one row.
<div class="container">
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-9">9</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
</div>
</div>
If I was to have 4 col-xs-3 they display correctly horizontally across the browser.
<div class="container">
<div class="row">
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
</div>
</div>
Here is the bootply : http://www.bootply.com/xuVoyvjNKr
What am I missing here ?
It's just a question about mathematic...
You have 3 x col-xs-1 and 1 x col-xs-9...
Width of document : 360px....
One col-xs-1 should have a width of : 360/12 = 30px...
But you forgot that the divs col-xx-xx has padding-right and padding-left to 15px...
So : The width of col-xs-1 - padding = 30px - 30px = 0...
You don't have enough place, so it jumps of one line...
It's not the case with col-xs-3 because 360/12*3 = 90px...
If you want you can set the padding to 0 for small views, but the problem will appear again if your screen size is less larger again....