I want to display static naive bar in top and rest entire page into grid of 6 column and increasing rows.
css:
http://grids.heroku.com/grid.css?column_width=182&column_amount=6&gutter_width=5
Here is html:
<div class=container_6>
<div class=grid_5>
</div>
</div>
JSFIDDLE : http://jsfiddle.net/karimkhan/vpqvrxhn/1/
Why display page still looks empty?
I am following this doc : http://1200px.com/
Why display page still looks empty?
Because your container's height is 0px. You must set some height to your Container's Grids.
I've created 6 Grids Container for you as 1200px.com for 6 columns - TRY THIS DEMO
HTML:
<div class=container_6>
<div class=grid_1></div>
<div class=grid_1></div>
<div class=grid_1></div>
<div class=grid_1></div>
<div class=grid_1></div>
<div class=grid_1></div>
</div>
CSS:
/* ---------- Containers ---------- */
.container_6 {
margin-left: auto;
margin-right: auto;
width: 1122px;
}
.grid_1 {
background-color: #FF0000;
height: 300px;
}
[EDITED]
As per your comment:
I want entire screen to be divided into grid of 6 column and 5 row. It
should be responsive to any device. IS that possible? – #user2129623
TRY - THIS DEMO
I've set padding: 5px 0px; and height: 20%; to .container_6 to divided the entire screen into grid of 6 columns and 5 rows and you can adjust the padding as you want.
Related
THE ISSUE
I need to do something I thought would be fairly common, yet I've been unable to find any definitive answers on how to go about it. It might be that I don't know the correct terms to search for, such as what one calls it when rows in a column "stack" under each other responsively.
WHAT I WANT TO ACHIEVE
Have a row with four columns with min widths of say 200px, and width of 25% of parent container. The end result should always be horizontally centered (which I can't really show in my below examples, but I trust it's easy enough to imagine).
|| COL-1 | COL-2 | COL-3 | COL-4 ||
Once the parent container is less than 991px, I want the columns to stack, in pairs. However, in most coding examples I've found online, typically what happens is this:
|| COL-1 | COL-2 | COL-3 |
| COL-4 ||
What I need is that there's always an even number of rows, and the image inside each cell resize as the cells resize.
Such as:
COL-1 COL-2 COL-3 COL-4
or break-point 1 (contents centered)
COL-1 COL-2
COL-3 COL-4
or break-point 2 (contents centered)
COL-1
COL-2
COL-3
COL-4
WHAT I'VE DONE SO FAR
After much searching (had to get my search terms right!) I found an example of what I want to do, but there was only text in the boxes. Once I throw an image into the mix (one image per cell), two issues occur. 1) The images are not responsive in their size, and they should be. 2) Before the stacking goes to 2x2 it first goes to 1x3 + 1x1 (the same issue I show in my ascii layouts above).
I've set up a CodePen of the original code here. It works just as I require, but not with images.
And there's a CodePen of my attempt to add in images here.
My attempted code is:
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* mobile phone */
.flex-container {
display: flex;
flex-wrap: wrap;
max-width: 1400px;
margin: 0 auto;
border: 1px solid red;
padding: 1em;
}
.flex-item-1 {
background: indianred;
}
.flex-item-2 {
background: blue;
}
.flex-item-3 {
background: tomato;
}
.flex-item-4 {
background: coral;
}
.flex-item {
flex: 100%;
height: auto;
text-align: center;
}
/* tablet */
#media screen and (min-width: 675px) and (max-width: 960px) {
.flex-item {
flex: 1 0 19em;
}
.flex-item:nth-child(2n) {
margin-left: 1em;
}
}
/* desktop */
#media screen and (min-width: 960px) {
.flex-item {
flex: 1 0;
}
.flex-container > * + * {
margin-left: 1em;
}
}
<body>
<div class="flex-container">
<div class="flex-item flex-item-1">
<img src="https://picsum.photos/300/300">
</div>
<div class="flex-item flex-item-2">
<img src="https://picsum.photos/300/300">
</div>
<div class="flex-item flex-item-3">
<img src="https://picsum.photos/300/300">
</div>
<div class="flex-item flex-item-4">
<img src="https://picsum.photos/300/300">
</div>
</div>
</body>
(I can't figure out how to make the RESULT panel in Stackoverflow "Code Snippets" wide enough to see the stacking effect of this code, so the Codepen examples would need to be viewed to see that).
MY QUESTION
How can I get the intended outcome, of the image sizes also being responsive, down to a specified min-width limit (e.g., 200px), and the columns still stacking evening just as they do before the images were introduced into the code?
I have noticed, that many websites (SO included) don't shrink to the whole width of the screen, preferring to render content column either of fixed-width or setting max-width property for it. Merriam-Webster dictionary website is a good example for the latter.
Is it possible to create such a layout using Bootstap? I have managed to limit content column width inside it's col-8-md div, but there is a huge gap between content and right sidebar on big displays now.
Live demo: https://codepen.io/anon/pen/dNprzm
HTML:
<div class="row">
<div class="col-md-8">
<div class="content-block">
CONTENT
</div>
</div>
<div class="col-md-4 right-bar">
RIGHT_BAR
</div>
</div>
CSS:
.content-block {
height: 1000px;
max-width: 1000px;
background-color: lightgreen;
margin-left: auto;
margin-right: auto;
}
.right-bar {
background-color: pink;
width: 400px;
}
If I'm understanding your question correctly, you just want to be sure to have a fixed width for your content but get rid of the space that's happening to the right of it on large screens?
Remove your margin-right: auto;. Once you get to a screen size where it's larger than 1000px, it's trying to "center" your .content-block
I am trying to create two <div> columns,p full height of the page. Left I am trying to create two <div> columns, both <div>'s taking up full height of the page. LeftI am trying to create two <div> columns, both <div>'s taking up full height of the page. Left
You should use calc() in CSS.
Here is an example code.
HTML
<div class="container">
<div class="fluid">
Fluid
</div>
<div class="fixed">
Fixed
</div>
</div>
CSS
.container {
width: 100%;
}
.fluid {
float: left;
background: #F8E71C;
width: calc(100% - 200px);
}
.fixed {
float: left;
background: #B8E986;
width: 200px;
}
Demo: https://jsfiddle.net/0w2qjtz7/
Try using giving min-width & use bootrap framework which will give you different grid options
https://getbootstrap.com/examples/grid/
I have a mobile website with 4 banners that appear side by side. When I get to a certain screen width, I want 2 of them to drop below the other 2. Part of the problem is that I have used width: 24.96% to obtain the right total width of all 4 divs to fit the body.
CSS
.small_banners .banner_block {
display: block;
max-width: 100%;
height: auto;
width: 24.96%; }
.small_banners {
float: left;
clear: both;
width: 100%;
margin: 0 0 15px; }
HTML
<div class="small_banners">
<div class="banner_block">
<div>
Content
</div>
</div>
<div class="banner_block">
<div>
2nd piece of content
</div>
</div>
<div class="banner_block">
<div>
3rd piece of content
</div>
</div>
<div class="banner_block">
<div>
The 4th piece of content
</div>
</div>
</div>
When the screen reaches 958px I want the 3rd and 4th divs to drop below the 1st and 2nd, using a simple media query: #media all and (max-width: 958px) {
this should work.
#media (max-width: 958px) {
.small_banners .banner_block{
width:50% !important;
}
}
Kishan's method does indeed work if implemented correctly! Here's a fiddle that illustrates using the css max-width property to change the width of the 4 .banner_block elements depending on the screen width.
https://jsfiddle.net/evc670st/1/
Note elements with class banner_block use display:block and float:left to stack horizontally. If you don't want to float these elements, you can use display: inline-block, but make sure there is no whitespace in between your html markup.
Source: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
I'm building a layout using Bootstrap 3 grids that should stack as follows:
Desktop:
1 | 2
1 | 2
- | 2
3 | 2
Mobile:
1
1
-
2
2
2
2
-
3
On another post I found a solution that floats the box2 to the right so that the grids stack correctly on the desktop. However, that only works when box2 is higher than box1. If it is not, box3 will show below box2 instead of box1. Is there any other way to stack these boxes as visualized above? All three boxes can have different heights and contain any number of lines of text, images, tables, etc.
http://jsfiddle.net/G9WPv/
This is very possible with CSS, and you can do this with Bootstrap's grid layout. In terms of solving this, you need to exploit the properties of right vs left float.
Demo: http://www.bootply.com/l0Flnma2Im
Consider the following sample. You'd expect this to show up 100% as intended on xs viewports, because each would be 100% width in the order you want. And, you'd expect it to show up as intended on md/lg browsers as well with the 1/3 on the left, but 2 on the right.
<div class="col-xs-12 col-md-6">
<div>1<br>1</div>
</div>
<div class="col-xs-12 col-md-6 pull-right">
<div>2<br>2<br>2<br>2<br>2</div>
</div>
<div class="col-xs-12 col-md-6">
<div>3</div>
</div>
Now, the only issue that arises is when the "1" block expands larger than the "2" block. When this happens, 3 appears on the right. Why is this happening? It happens because the float is simply trying to fill in the empty gap on the right. However, we can force it to always be on the left by using clear: left; to ensure nothing appears to the left of it.
.always-left {
clear: left;
}
The code now becomes:
<div class="col-xs-12 col-md-6">
<div>1<br>1</div>
</div>
<div class="col-xs-12 col-md-6 pull-right">
<div>2<br>2<br>2<br>2<br>2</div>
</div>
<div class="col-xs-12 col-md-6 always-left">
<div>3</div>
</div>
This is very possible to do using just media queries and some absolute positioning.
Look at this fiddle
You need to wrap your 3 divs inside a container.
essentially your css will look something like this.
.container {
width: 100%;
position: relative;
}
#box1 {
background-color: #d7d7d7;
width: 100%;
}
#box2 {
background-color: #e7e7e7;
width: 100%;
position: relative;
}
#box3 {
background-color: #f7f7f7;
width: 100%;
}
#media screen and (min-width: 700px) {
#box1, #box3 {
width: 40%;
}
#box2 {
width: 60%;
position: absolute;
top: 0;
right: 0;
}
}
The boxes can be of any size and on a mobile size screen they will stack in the correct order.
of course with the bootstrap gird system there might be a little tweaking involved to get it just right... but this is the essence of it.
Peace.