How to make side parts of web page reduce they width with reducing width of whole page by degrees?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
display: grid;
grid-template-columns: 10% 80% 10%;
min-height: 100vh;
}
.side-right {
background: red;
}
.side-left {
background: blue;
}
.main {
background: green;
}
#media screen and (max-width: 1000px) {
.container {
grid-template-columns: 0 100% 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="side-right">
</div>
<div class="main">
</div>
<div class="side-left">
</div>
</div>
</body>
</html>
In example below after max-width = 1000px side elements are dissapearing instantly, but I want to make them reducing they width reacting by every pixel changed on max-width. How to make it?
If I understand your requirement correctly...change the initial grid-template-columns to
grid-template-columns: 1fr minmax(1000px, 8fr) 1fr;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.container {
display: grid;
grid-template-columns: 1fr minmax(1000px, 8fr) 1fr;
min-height: 100vh;
}
.side-right {
background: red;
}
.side-left {
background: blue;
}
.main {
background: green;
}
#media screen and (max-width: 1000px) {
.container {
grid-template-columns: 0 1fr 0;
}
}
<div class="container">
<div class="side-right">
</div>
<div class="main">
</div>
<div class="side-left">
</div>
</div>
You can animate all with flex-box and just by changing some of your css.
.container {
display: flex;
min-height: 100vh;
flex-direction: row-reverse;
}
.side-right {
background: red;
width: 100%;
}
.side-left {
background: blue;
width: 100%;
}
.main {
background: green;
min-width: 600px;
}
Thats just a basic example. Consider reading more about flex-box.
Try to add min-with: 50px; to .side-right and .side-left
And then give them both an z-index: 1;
So they wont lay under your main
Hope that helps
Related
I have a problem with this flexbox. I would like to place 3 div per row. For this reason I've used flexbox.
The first 3 divs are fine and have 33% width, while the divs 4 and 5 get 50%.
Is there any trick to do the job?
Thanks
* {
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: wrap;
font-size: 30px;
text-align: center;
}
.flex-item-left {
background-color: #f1f1f1;
padding: 10px;
flex: 33%;
}
.flex-item-center {
background-color: dodgerblue;
padding: 10px;
flex: 33%;
}
.flex-item-right {
background-color: red;
padding: 10px;
flex: 33%;
}
/* Responsive layout - makes a one column-layout instead of a two-column layout */
#media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}
<h1>Responsive Flexbox</h1>
<p>In this example, we change the percentage of flex to create different layouts for different screen sizes.</p>
<p><b>Resize the browser window to see that the direction changes when the
screen size is 800px or smaller.</b></p>
<div class="flex-container">
<div class="flex-item-left">1</div>
<div class="flex-item-center">2</div>
<div class="flex-item-right">3</div>
</div>
<div class="flex-container">
<div class="flex-item-left">4</div>
<div class="flex-item-center">5</div>
</div>
flex: 33% is short for flex: 1 1 33% meaning that the container will grow or shrink if needed with a basis of 33%. Since there is space left, the containers will grow to 50%.
To fix this, replace the flex property with 0 1 33% meaning that it cannot grow and will not be larger than 33%.
You can simplify with display: grid; and it will give you a little more control over your layout.
* {
box-sizing: border-box;
}
.row-1 {
grid-column: 1 / -1;
grid-gap: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
flex-direction: column;
text-align: center;
}
.row-2 {
grid-column: 1 / -1;
grid-gap: 0;
display: grid;
grid-template-columns: repeat(2, 50%);
flex-direction: column;
text-align: center;
}
.flex-container {
display: flex;
flex-wrap: wrap;
font-size: 30px;
text-align: center;
}
.flex-item-left {
background-color: #f1f1f1;
padding: 10px;
}
.flex-item-center {
background-color: dodgerblue;
padding: 10px;
}
.flex-item-right {
background-color: red;
padding: 10px;
}
/* Responsive layout - makes a one column-layout instead of a two-column layout */
#media (max-width: 800px) {
.row-1, .row-2 {
display: flex;
flex-direction: column;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
<h1>Responsive Flexbox</h1>
<p>In this example, we change the percentage of flex to create different layouts for different screen sizes.</p>
<p><b>Resize the browser window to see that the direction changes when the
screen size is 800px or smaller.</b></p>
<div class="row-1">
<div class="flex-item-left">1</div>
<div class="flex-item-center">2</div>
<div class="flex-item-right">3</div>
</div>
<div class="row-2">
<div class="flex-item-left">4</div>
<div class="flex-item-center">5</div>
</div>
</body>
</html>
I have to achieve below three layout - in a responsive way.
1st layout - default layout
2nd Layout - with "min-width:600px"
3rd Layout - with "min-width:700px"
Above three layout I have already achieved.
I have mentioned height "200px" for dark-blue and red colored divs, which is actually somewhat fixed. If at a later stage, content in it increases (hypothetically) - the design layout will fail I think.
Is there any better way of doing it dynamically and my design doesn't fail if content increases.
I tried to think of it but couldn't get any.
Just Asked this question for better learning.
I wanted to achieve it by using flexbox. Any other way is also appreciated.
Can someone point in right direction?
I have added my HTML and css code.
/* default color of background */
.red {
background: red;
}
.dark-blue {
background: darkblue;
}
.light-blue {
background: lightblue;
}
.green {
background: green;
}
/* Container properties */
.container {
/* mentioned 100% so that element inside takes full width i.e with id = container2 */
width: 100%;
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
height: 100px;
}
/* Responsive design proprties */
#media screen and (min-width: 600px) {
.dark-blue {
width: 50%;
height: 200px;
}
#container2 {
width: 50%;
height: 50%;
}
}
#media screen and (min-width: 700px) {
.dark-blue,
.red {
height: 200px;
}
.dark-blue {
width: 25%;
order: 2;
}
#container2 {
width: 50%;
flex-wrap: wrap;
}
.red {
width: 25%;
order: -1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout shifter</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="box dark-blue"></div>
<div class="container" id="container2">
<div class="box light-blue"></div>
<div class="box green"></div>
</div>
<div class="box red"></div>
</div>
</body>
</html>
Flexbox has some advanatges and some downsides. one of the downsides is, that it is only good in controlling either height or width. Not both.
If you need to control both, CSS-Grid is the way to go.
Use grid-template-areas to place the divs. Its the equivalent to flex order.
body {
margin: 0;
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
display: grid;
}
.dark-blue {
grid-area: dark-blue;
background-color: darkblue;
}
.light-blue {
grid-area: light-blue;
background-color: lightblue;
}
.green {
grid-area: green;
background-color: green;
}
.red {
grid-area: red;
background-color: red;
}
#media only screen
and (max-width: 600px) {
body {
grid-template-areas:
"dark-blue"
"light-blue"
"green"
"red"
}
}
#media only screen
and (max-width: 600px) {
body {
grid-template-areas:
"dark-blue"
"light-blue"
"green"
"red";
}
}
#media only screen
and (min-width: 601px)
and (max-width: 700px) {
body {
grid-template-areas:
"dark-blue light-blue"
"dark-blue green"
"red red";
}
}
#media only screen
and (min-width: 701px) {
body {
grid-template-areas:
"red light-blue light-blue dark-blue"
"red green green dark-blue"
}
}
<div class="dark-blue"></div>
<div class="light-blue"></div>
<div class="green"></div>
<div class="red"></div>
Here is my html mockup
html, body {
margin:0px;
padding:0px;
height: 100vh;
background-color: gray;
}
.container {
display: flex;
width: 100%;
height: 100%;
background-color: red;
}
.left {
flex: 0.5;
height: 500px;
background: blue;
}
.right {
flex: 0.5;
height: 1300px;
background: green;
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
Here class "right" has height of 1300px which makes scroll on to the window.
When I scroll the parent "container" is not as the height of "right".
I want the parent "container" height to be increased if child "right" height is increased".
How to achieve this ??
I did not understand what you mean, but test this code..
.container {
display: -ms-grid;
display: grid;
background-color: red;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
gap:30px;
width: 100vw;
height: 100vh;
}
.left {
height: 200px;
background: blue;
}
.right {
background: green;
}
I need to setup the following DIV structure (See image below. It tells more than a 1000 words)
The structure consists of 2 colums. The main column (left) has a variable width and 100% height.
The right colums has a FIXED width of 380px and 100% height.
Then inside the right column I need 3 DIVS.
The top DIV has a fixed height of 200px and must be aligned to the top.
The bottom DIV has a fixed height of 150px and must be aligned to the bottom.
The middle DIV has a variable height and must fill up the space vertically.
This is the DIV setup And the CSS I have:
.main-content {
width: 100%;
padding: 0px;
}
.col-1 {
width: calc(100% - 380px);
min-height: calc(var(--vh, 1vh)*100);
background-color: #2693FF;
float: left;
}
.col-2 {
width: 380px;
min-height: calc(var(--vh, 1vh)*100);
float: right;
}
.col-2-top {
height: 200px;
background-color: #00B200;
}
.col-2-middle {
height: 100%;
background-color: #FF8000;
}
.col-2-bottom {
height: 100px;
background-color: #B25900;
}
<div class="main-content">
<div class="col-1"></div>
<div class="col-2">
<div class="col-2-top"></div>
<div class="col-2-middle"></div>
<div class="col-2-bottom"></div>
</div>
</div>
Then... Column 1 and 2 should stack when the viewport width becomes less than 768px.
Column 1 on top and Column 2 below it.
Like this:
I think I'm almost there, but I'm having problems with the height of the Main DIV and the heights and aligning of the DIV col-2 middle DIV. I also need a bit helpt to get these divs stack nicely above each each other.
I would suggest that you use grid layout instead of floating around your <div>s, grid layout allows you to structure your layout and separate them in columns and rows, and areas using grid-template-areas.
for max-width:748 just add media query, here is how it might be implemented:
body {
padding: 0;
margin: 0;
}
.main-content {
display: grid;
background-color: #2196F3;
grid-template-areas:
'main fixed-top'
'main variable-mid-area'
'main fixed-bottom';
background-color: #2196F3;
height: 100vh;
grid-template-columns: 1fr 380px;
grid-template-rows: 200px 1fr 150px;
}
.main-content > div {
color: #fff;
font-size: 30px;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
}
.main {
grid-area: main;
background-color: #2693FC;
}
.variable-mid-area {
grid-area: variable-mid-area;
background-color: #FF8015;
}
.fixed-top {
grid-area: fixed-top;
background-color:#00B21F;
}
.fixed-bottom {
grid-area: fixed-bottom;
background-color: #B2590B;
}
#media only screen and (max-width: 768px) {
.main-content {
grid-template-areas:
'main'
'fixed-top'
'variable-mid-area'
'fixed-bottom';
grid-template-rows: 300px 200px 1fr 150px;
grid-template-columns: 100%;
height: auto;
}
}
<div class="main-content">
<div class="main"> main </div>
<div class="fixed-top"> 200 </div>
<div class="variable-mid-area"> auto </div>
<div class="fixed-bottom"> 150 </div>
</div>
If you have any questions how the css works, feel free to ask them in the comments.
I know the background-colors are irrelevant but they help to visualize it.
.container {
min-width: 768px;
width: 100%;
display: grid;
grid-template-columns: calc(100% - 380px) 1fr;
min-height: 100vh;
}
.col1 {
background-color: dodgerblue;
}
.col2 {
display: flex;
flex-direction: column;
}
.col2-row1 {
height: 200px;
background-color: orange;
}
.col2-row2 {
background-color: forestgreen;
height: 100%;
}
.col2-row3 {
height: 150px;
background-color: red;
}
#media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
<div class="container">
<div class="col1">1</div>
<div class="col2">
<div class="col2-row1">2</div>
<div class="col2-row2">3</div>
<div class="col2-row3">4</div>
</div>
</div>
I have a container with four boxes. The container all together should be the width of the window.
Above 720px, there should be one row of four boxes.
Below 720px, there should be two rows of two boxes.
Below 600px, there should be four rows of one box.
I'm confused what I should put in the media queries.
html,
body {
width: 100%;
height: 100%;
}
.container {
border: 1px solid black;
display: flex;
height: 100%;
width: 100%;
}
.column {
border: 1px solid red;
flex: 1;
}
#media (max-width: 720px) {
.container {
?
}
}
#media (max-width: 600px) {
.container {
?
}
}
<div class="container">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
Set the flex items to wrap at your breakpoints.
Here's a fiddle demo.
.container {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
.column {
flex: 1;
border: 1px solid black;
background-color: lightgray;
}
#media (max-width: 720px) {
.column {
flex-basis: 34%;
background-color: orange;
}
}
#media (max-width: 600px) {
.column {
flex-basis: 51%;
background-color: lightgreen;
}
}
body {
margin: 0;
}
<div class="container">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
Note that with flex-grow: 1 defined in the flex shorthand, there's no need for flex-basis to be exact (25%, 50%, 100%), which can result in unequal wrapping if you were to add margin space.
Since flex-grow will consume free space on the row, flex-basis only needs to be large enough to enforce a wrap. This will ensure plenty of space for margins, but not enough space for an extra item.
You could use grids to achieve this. If you name them like I did in the snippet, it is easy to alter the sequence of the columns.
.container {
display: grid;
grid-auto-rows: 200px;
grid-auto-columns: auto;
grid-template-areas:
"column1 column2 column3 column4";
border: 1px solid black;
width: 100%;
height: 100%;
}
.column {
display: flex;
}
.column1 {
grid-area: column1;
background-color: red;
}
.column2 {
grid-area: column2;
background-color: yellow;
}
.column3 {
grid-area: column3;
background-color: green;
}
.column4 {
grid-area: column4;
background-color: blue;
}
#media (max-width: 720px) {
.container {
grid-template-areas:
"column1 column2"
"column3 column4";
}
}
#media (max-width: 600px) {
.container {
grid-template-areas:
"column1"
"column2"
"column3"
"column4";
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="column column1"></div>
<div class="column column2"></div>
<div class="column column3"></div>
<div class="column column4"></div>
</div>
</body>
</html>
More info about grids in CSS here