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.
Related
I can't figure out how to make the grids to extend to the container's full width no matter how many columns there are
<div class="container">
<div class="row">
<div class="col-md-2 first"></div>
<div class="col-md-9 second"></div>
</div>
</div>
In the example above are displayed 2 columns inline and the .row having full width.Yet if i remove the first div(keeping the exact same code), the second div will change its position to left and will keep the original width.I need it to stretch to the full width of the container.The reason i need this is because i'll have some php conditional expression that will prevent it from showing,in which case i want the template to change and the second div to be full width and position on the middle.
I found an answer with the following CSS which indeed worked but it also messed the responsive structure and i'll have to patch it up till no end probably:
CSS:
.row{
display: table;
width: 100%;
}
.first, .second{
display: table-cell;
float: none;
}
.second{
width: 100%;
}
Since i'm a newbie with Bootstrap, i was wondering if there is any built in class which solves this problem? Thank you
In this case, just have the first div as col-2 and the second one as col.
col will be 100% width if col-2 is missing, but if it is there, col will fill the remaining columns.
Check out the Grid system documentation.
I'm not sure why you're using display:table. Just use Bootstrap 4 auto-layout grid, and the second will fill the width if the first is missing/hidden.
"Auto-layout for flexbox grid columns also means you can set the width
of one column and have the sibling columns automatically resize around
it."
https://www.codeply.com/go/igkSq57Vwn
<div class="row">
<div class="col-md-2 first"></div>
<div class="col-md second"></div>
</div>
i have same problem . and you can fix it by set (margin : 0px) for row (by style attribute or id in css file) and set (padding : 0px) for col (by style attribute or id in css file)
This is visual demonstration: Image
I'm trying to put in my laptop column(col-md-8) second column, but when I try, the other one went under the column of the laptop, how can I put a second(col-md-6)column inside a laptop column, and that column laptop still has its full size.
Do you want like this? It's a very short and a messy description you have. So I hope i'm right.
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="row">
<div class="col-md-6 col-sm-6">
Laptop Image
</div>
</div>
</div>
</div>
"col-md-8 col-sm-12" classes will keep your column content as you like in tablet view+desktop view but when it becomes smaller like smartphone view, it will expand to the column to full width and you will still able to see your stuff inside of the laptop column.
Please read the bootstrap documentation from here. Anything else you want quick google will fix your issues or we're here at stackoverflow to help you out. :)
Update
This is what you want isn't it?
https://jsfiddle.net/5jrt314r/2/
Now Whatever goes inside of that .inside class will depend on the laptop image size you have. It will automatically horizontally and vertically center based on the .laptop class you have.
You said you want it responsive so you have to:
Keep your laptop element aspect ratio the same as the image.
Have a screen element that will always fill laptop's screen even if laptop image size changes due to it filling parent element.
If I am right you want this:
HTML:
<div class="row">
<div class="col-xs-8 laptop">
<div class="row">
<div class="col-xs-offset-3 col-xs-9 screen">
This column need to go in laptop screen
</div>
</div>
</div>
</div>
CSS:
.laptop {
background: url('http://devel0p.com/damir/wp-content/themes/helium/images/portofolio/macbook.png');
background-size: 100%;
background-repeat: no-repeat;
/* Padding will keep element aspect ratio so we always show image in it's original aspect ratio */
padding-bottom: 89.32%;
}
.screen {
background: red;
/* Make sure this element is always the size of the screen */
padding-bottom: 64%;
}
I calculated image aspect ratio to be 89.32~% by dividing width by height which is respectively 2084px and 2333px.
Here is a codepen example http://codepen.io/anon/pen/aNqKZL
UPDATE
In the first example .screen element would go beyond laptop screen because of it being stretched by it's content. Here is a version that deals with it http://codepen.io/anon/pen/qZxKRo
I am trying to have a centered main content div along with a right sidebar using Bootstrap 3.0.
I have tried the following code to achieve this.
BootPly
But when i resize the browser to shorter width, the sidebar gets pushed down and also the main content get wider. Is this behavior expected of bootstrap ? Do i need to add col-xs* to accommodate the shorter width ?
I am wondering if this is the correct way to achieve this design ?
Thanks !
Yes, it is default behaviour. Bootstrap 3 was built with "mobile first" in mind, so the layout is responsive by default. You can achieve this effect by writing a custom grid and not using the Bootstrap column classes, like col-sm-6 and so on.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content">
Main Content
</div>
<div class="sidebar">
Side bar
</div>
</div>
</div>
</div>
Then write some css. This is just an example, and you should customise to fit your own needs.
.sidebar { width: 33.3%; }
.content { width: 66.6%; }
You can fit two columns on the smallest screen size, but it's unlikely that this is what you are after. On small screens there's very little space for any substantial content to fit into two columns.
<div class="col-xs-6">
Main Content
</div>
<div class="col-xs-6">
Side bar
</div>
You are indeed correct that this is a feature of bootstrap :) You're also correct on using .col-xs-* to achieve your planned design. To add to what you're trying to do, (just in case you haven't tried this already) you can also combine the grid classes in order to accommodate the different screen sizes.
Here's an example:
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
Goodluck! :)
As a beginner user of Bootstrap's grid system, I need to keep two divs side-by-side using a float:left regardless of device. This is so that a jQuery animation moves a parent div right and left to bring either div into view. How to structure the HTML of the green boxes to achieve this effect? Or it purely a css media query matter?
Disregard the blue box.
This is what I have so far:
<div class="container">
<div class="col-xs-12 col-md-7 view">
<div id="panelviewer">
<div class="row">
<div class="col-xs-12 col-md-6 panel1">one</div>
<div class="col-xs-12 col-md-6 panel2">two</div>
</div>
</div>
</div>
</div>
Jsfiddle
There are other ways to keep the divs side by side and achieve what you need:
#panelviewer .row {white-space:nowrap;}
.panel1 {display:inline-block;float:none;background:#aaa;}
.panel2 {display:inline-block;float:none;background:#eee;}
Demo http://jsfiddle.net/7HcQ8/3/
No matter what unless you implicitly specify in a media query and your cells are too wide to fit in mobile it will force onto two lines. In this case when it hits the mobile breakpoint decrease the size of the content so it will fit. Place a unique class on those DIVs such as class="sizeSmaller" and this might help out:
#media (max-width: 768px) {
.sizeSmaller {
height:50%;
width:50%;
}
}
Adjust the width of the media query to suit your neds.
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