I have to make a very simple responsive website, thinking to use Bootstrap 3. First time playing around...
All content is maximum width 960px, very simple, just header (960px), a main interface (630px) and a sidebar (320px), with an space of 10px between both.
When we are on small devices, the sidebar should be stacked under main interface.
So, I know that Bootstrap3 accepts 12 grids, each grid maximum 70px + max 30px gutter (dividing each grid).
If I apply the code below...
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>my Header, should be 960px</h1>
</div>
</div>
<div class="row">
<div class="col-sm-8 ">This should be 630px</div>
<div class="col-sm-4 col-xs-12">This should be 320px</div>
</div>
</div>
Of course I allways get a 1170px in all content (8+4=12 grids) in desktop devices.
How can I do to make the content 960px width?
Wrap your rows in a fixed width container like..
.container-fixed {
margin: 0 auto;
max-width: 960px;
}
The row and col-* will still work responsively inside the fixed width container.
Here's a working demo: http://bootply.com/96043
Related
I have divided screen layout into two sections each of col-lg-6. I have placed a grid having 6 columns inside col-lg-6. For desktop size above 1280px width the Grid fits properly into col-lg-6. But below 1280px screen size the Grid exceeds out of col-6 size.
I want to apply horizontal scroll to Grid or Grid container div when the screen size reduces below 1280px.(lets consider the minimum mobile screen size up to 300px).
I have tried different solutions as follows:
Apply white-space=normal for td tag of Grid table
Apply table-responsive class at Grid container div
Apply table-responsive-lg table-responsive-md table-responsive-sm at Grid level
Solution provided at link https://jsfiddle.net/glebkema/zaazhp2d/.
Applying scroll to Grid container div using media query for screen width below 1280px.
<div class="row col-lg-12">
<div class="col-lg-6">some asp.net controls </div>
<div class="col-lg-6">
<div class="row col-lg-12">
some asp.net controls
</div>
<div class="row col-lg-12">
<div class="container">
<telerik:RadGrid ID="rad1" runat="server" class="table-
responsive-sm table-responsive-md table-responsive-lg">
<%--Grid Template columns --%>
</telerik:RadGrid>
</div>
</div>
</div>
But none of this worked. I am unable to understand what CSS style I am missing. I have used table-responsive class in some pages and it worked for me, but here it is not. I have recently started using bootstrap 4 for responsive designs.
Try applying below css for horizontal scroll.
.your-grid-container{
overflow-x: scroll;
white-space: nowrap;
}
I need a section in bootstrap where there are two columns (6 and 6) in a row.
The left 6 column div needs to have the fluid effect where its contains stretch to the browser window's left edge.
The right 6 column div needs its contents to match/be kept within the right-side confines of the other sections of the page that have a normal (non-fluid) container class (which has a width of 1170px).
How can I best achieve this effect?
This is for 1170px wide container, you need media queries for the rest of the sizes. Hopefully helps.
CSS:
.stretch-left {
margin-left: calc((100vw - 1170px) / -2);
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 stretch-left">
content
</div>
<div class="col-md-6">
content
</div>
</div>
</div>
I've setup a bootstrap grid like so:
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<!-- content -->
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<!-- content -->
</div>
<!-- More cols -->
</div>
The number of cols to display on each grid row should depend on screen size so I find it difficult to specify more div class="row" or do div clearfix to insert breaks. That's why all cols are inside the same div class="row".
It all works fine in mobile view (width < 500) and desktop/tablet landscape (width > 1024), but in between those widths the row + cell content goes beyond the screen with horizontal scrolling and thus the images doesn't center align.
You can see it live here if you resize your width to around 700-750. I've been trying to debug why this is happening, but I can't figure out what I'm doing wrong. Anyone care to help?
You Define min width in
"#header-wrap, #banner-wrap, #nav-wrap, #main-wrap, #footer-wrap, #total-wrapper"
{background: #fff none repeat scroll 0 0;
min-width: 960px;
width: 100%;}
Remove this min-width.
Second Thing you add width your Custom CSS for add.css Line No.6
this width remove or add max-width & try.
.container {
margin: 0 auto;
width: 960px;}
If you are talking about 700-750px then simply remove the max-width from .container class and also from remove max-width from this #header-wrap, #banner-wrap, #nav-wrap, #main-wrap, #footer-wrap, #total-wrapper.
I have edited my answer but please go with lalji's answer..
I am curious as to what I have to change to the following jsbin (see code below) in order to get a couple things to happen:
The 4 images should be in the centre of the page, in stead they are off a bit.
The 4 images should sit beside each other (not over lapping like they are) and they should stay beside each other, with no gaps developing, above 1920px. They should then follow bootstrap conventions when the screen shrinks. (This leads to point 3)
When the screen shrinks bootstrap conventions should be followed for how rows and columns and containers behave. Images should shrink down appropriately.
Currently what I have is my attempt. I can get them beside each other, with gaps as the screen size gets larger or over lapping at 1920px.
When the screen shrinks, things go hey wire. There should be 4 images beside each other with the same width of gap on either side of the first and last image, they should stay beside each other regardless of the screen size (going up) and then follow bootstrap conventions when the screen shrinks, images should also shrink to fit on mobile devices.
Html
<div id="wrap">
<div class="container">
<div class="container image-links">
<div class="row-helper">
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
</div>
</div>
</div>
</div>
</div>
Css
-- This is compiled down from sass.
#wrap .container .image-links {
width: 100%;
}
#wrap .container .image-links .row-helper {
margin-left: 245px;
}
#wrap .container .image-links .row-helper .row .col-md-3 {
margin-left: -2px;
margin-right: -62px;
}
I guess this is what you want. Check here.
Well, the images need to be given a size so that they fill their containers and not overflow. This was the reason of their overlapping. So just gave them a width here.
.img{
width:100%;
}
So removed the css you gave for adjusting the margins.
And, for removing those gaps, just made padding as 0px as below.
#wrap .container .image-links .row-helper .row .col-md-3 {
padding:0px;
}
I'm a beginner in css and I have a little problem. I tested different methods to handle a responsive 4 div grid with css, and I failed.
I want to responsively arrange the 4 divs as an grid with 2 columns and, if the display is to narrow it should be floating to a one column layout.
Here is a sketch of the responsive grid:
Here is a simple responsive grid with 4 div boxes in plain CSS and HTML it aranges from two to one columns when the browser width becomes smaller :
DEMO (resize the result window to see the effect)
Note that the max-width value on the #container is set to 450px so that 2 blocks + their margin can fit by width in two colmuns.
When the widow is smaller than 450px the width of the #container adapts to the window width and as the block can't fit anymore, they rearage to one column.
#container {
text-align: center;
max-width: 450px;
margin: 0 auto;
}
.block {
width: 200px;
height: 200px;
margin: 10px;
display: inline-block;
background: #00CC99;
}
<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
You may want to check out Bootstrap, and specifically their Grid System. You can easily accomplish what you want with that. Otherwise, you'd want to look into writing your own CSS Media Queries to handle the different screen sizes.
Here's a JSFiddle showing how this can be achieved using Bootstrap. Just drag the side of the Result container to make it smaller and you can see the blocks shift. This may need some tweaking but it should get you going.
<div class="row">
<div class="col-sm-2 col-sm-offset-3 col-xs-12">
<div class="block">1</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="block">2</div>
</div>
<div class="col-sm-2 col-sm-offset-3 col-xs-12">
<div class="block">3</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="block">4</div>
</div>
</div>
In the above code, I'm creating a Bootstrap Grid which uses 12 columns. You can specify the column width at different screen sizes, for example the class col-sm-2 is saying use 2/12ths of the width for small screen sizes, then offset it 3 to center it. col-xs-12 says to use the full width for extra small screen sizes (essentially moving each block to its own row for extra small screens). Note the row class as well which is also Bootstrap specific.
Hopefully this helps!
Bootstrap is a great tool to do this as the above answerer said. Bootstrap allows you to position items in a grid layout (as you want).
Another way to do this is create media queries in css that will take effect when the browser has a smaller or larger min-width.
I recommend using Bootstrap as all of the heavy lifting is done for you and you would just have to make small tweaks to ensure it looks like you want it to.