I have three divs and I want the middle div to be higher than other two.
I tried using top:-50 for the second div, but it didn't work.
.cards {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
flex: 0 0 31%;
margin: 0 1% 2% 1%;
height: 300px;
background-color: red;
}
#media only screen and (max-width: 460px) {
.card {
flex: 0 0 48%;
}
}
#media only screen and (max-width: 360px) {
.card {
flex: 0 0 100%;
}
}
<div class="cards">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
</div>
You're using flexbox! Don't rely on margins.
codepen: https://codepen.io/nstanard/pen/gqYrjZ
.cards {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
height: 350px;
justify-content: bottom;
align-items: flex-end;
}
.card {
flex: 0 0 31%;
margin: 0 10px;
height: 300px;
background-color: red;
}
.card:nth-child(2) {
align-self: flex-start;
}
#media only screen and (max-width: 460px) {
.card {
flex: 0 0 48%;
}
}
#media only screen and (max-width: 360px) {
.card {
flex: 0 0 100%;
}
}
<div class="cards">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
</div>
snippet:
.cards {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
height: 350px;
align-items: center;
}
.card {
flex: 0 0 31%;
margin: 0 1% 2% 1%;
height: 300px;
background-color: red;
}
.card:nth-child(2) {
align-self: flex-start;
}
#media only screen and (max-width: 460px) {
.card {
flex: 0 0 48%;
}
}
#media only screen and (max-width: 360px) {
.card {
flex: 0 0 100%;
}
}
<div class="cards">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
</div>
for second div use margin-top and margin-bottom is -50px it will works...
so use this class
.card:nth-child(2){
margin:-50px 0;
}
.cards {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top:60px;
}
.card {
flex: 0 0 31%;
margin: 0 1% 2% 1%;
height: 300px;
background-color: red;
}
.card:nth-child(2){
margin:-50px 0;
}
#media only screen and (max-width: 460px) {
.card {
flex: 0 0 48%;
}
}
#media only screen and (max-width: 360px) {
.card {
flex: 0 0 100%;
}
}
<div class="cards">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
</div>
Related
I have an example of a simple grid in which when the screen size is less than 767 pixels, all blocks stretch to fill the screen.
Section 2 moves to the very bottom when this size (767 pixels) is reached. And I have something like this: Section 1, footer, section 2. Is it possible to somehow make section 2 at the very top? (section 2, section 1, footer)
* {
box-sizing: border-box;
}
.wrapper {
max-width: 1200px;
width: 100%;
padding: 0 0px;
margin: 0 auto;
}
.leftcolumn {
float: left;
width: 65%;
}
.rightcolumn {
float: left;
width: 35%;
padding-left: 20px;
}
.row:after {
content: "";
display: table;
margin-top: 20px;
}
.footer {
padding: 20px;
text-align: center;
background: rgba(221, 221, 221, 0.3);
margin-top: 20px;
}
#media screen and (max-width: 767px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
<div class="wrapper">
<div class="row">
<div class="leftcolumn">
1 section
<div class="footer">
footer
</div>
</div>
<div class="rightcolumn">
2 section
</div>
</div>
</div>
Here is what I have now:
Here is what I want to get:
I did these changes in your code:
Use grid instead float. Then set grid-column and grid-row for grid items. Then change these for screen size smaller than 768px.
Note also I changed your HTML for this purpose:
* {
box-sizing: border-box;
}
.wrapper {
max-width: 1200px;
width: 100%;
padding: 0 0px;
margin: 0 auto;
}
.row {
display: grid;
grid-template-columns: 65% 35%;
}
.rightcolumn {
grid-column: 2 / 3;
padding-left: 20px;
}
.row:after {
content: "";
display: table;
margin-top: 20px;
}
.footer {
grid-row: 2 / 3;
padding: 20px;
text-align: center;
background: rgba(221, 221, 221, 0.3);
margin-top: 20px;
}
#media screen and (max-width: 767px) {
.row {
grid-template-columns: 100%;
}
.rightcolumn {
grid-row: 1 / 2;
grid-column: 1 / 2;
padding-left: 0;
}
.footer{
grid-row: 3 / 4;
}
}
<div class="wrapper">
<div class="row">
<div class="leftcolumn">
1 section
</div>
<div class="footer">
footer
</div>
<div class="rightcolumn">
2 section
</div>
</div>
</div>
You can simply do it by using flexbox and a little bit of change in your html code.
* {
box-sizing: border-box;
}
.wrapper {
max-width: 1200px;
width: 100%;
border: 2px solid blue;
padding: 0 0px;
margin: 0 auto;
}
.left {
width: 65%;
}
.rightcolumn {
width: 35%;
padding-left: 20px;
}
.row {
display: flex;
justify-content: space-between;
}
.footer {
padding: 20px;
width: 100%;
text-align: center;
background: rgba(221, 221, 221, 0.3);
margin-top: 20px;
}
#media screen and (max-width: 767px) {
.row {
flex-direction: column;
}
.left,
.rightcolumn {
width: 100%;
padding: 0;
}
.left {
order: 2;
}
.rightcolumn {
order: 1;
}
}
<div class="wrapper">
<div class="row">
<div class="left">
<div class="leftcolumn">
1 section
</div>
<div class="footer">
footer
</div>
</div>
<div class="rightcolumn">
2 section
</div>
</div>
</div>
You can set the width of .footer div according to your preference above 767 pixels, I have set it 100%;
I am using flex and I am trying to achieve something. There are 5 divs shown in the code. In min-width:768px I want the fourth and the fifth div to be centered. Can anyone help me? Here is the code:
css
.row{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
position: relative;
width: 100%;
border:1px solid black;
}
#media (min-width:576px){
.col {
-ms-flex: 0 0 33%;
flex: 0 0 33%;
max-width: 33%;
}
}
#media (min-width: 768px){
.col {
-ms-flex: 0 0 19%;
flex: 0 0 19%;
max-width: 19%;
}
}
html
<div class="row">
<div class="col"><p>first</p> </div>
<div class="col"><p>second</p> </div>
<div class="col"><p>third</p> </div>
<div class="col"><p>fourth</p> </div>
<div class="col"><p>fifth</p> </div>
</div>
You could try this in your media query:
#media (min-width: 768px){
.col {
-ms-flex: 0 0 19%;
flex: 0 0 19%;
max-width: 19%;
}
.col:nth-child(4),
.col:nth-child(5){
text-align: center;
}
}
here is your code I have correct it. you just work with little bit of css
.row{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
.col {
position: relative;
width: 100%;
border:1px solid black;
}
#media (min-width:576px){
.col {
-ms-flex: 0 0 19%;
flex: 0 0 19%;
max-width: 19%;
}
}
#media (min-width: 768px){
.col {
-ms-flex: 0 0 33%;
flex: 0 0 33%;
max-width: 33%;
}
}
<div class="row">
<div class="col"><p>first</p> </div>
<div class="col"><p>second</p> </div>
<div class="col"><p>third</p> </div>
<div class="col"><p>fourth</p> </div>
<div class="col"><p>fifth</p> </div>
</div>
I want to center the divs how I currently have them, but the issue is that when there are two divs they are not aligning with the rectangle above. I know that they would align with justify-content:space between, but that would prevent a div from being centered when it is the only one in the row. Is it possible what I want to do?
.wrapper {
max-width: 1000px;
margin: 0 auto
}
.title {
width: 100%;
height: 100px;
background: green;
margin-bottom: 30px;
}
.outer {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col {
/* flex-grow, flex-shrink, flex-basis*/
flex: 0 0 31%;
margin: 0 1% 2% 1%;
height: 300px;
}
.col1 {
background-color: red;
}
.col2 {
background-color: blue
}
.col3 {
background: black;
}
#media only screen and (max-width: 960px) {
.col {
flex: 0 0 48%;
}
}
#media only screen and (max-width: 480px) {
.col {
flex: 0 0 100%;
}
}
<div class="wrapper">
<div class="title">
</div>
<div class="outer">
<div class="col col1">
</div>
<div class="col col2">
</div>
<div class="col col3">
</div>
</div>
</div>
You can set a margin-left: auto to the .col1 and margin-right: auto to the .col2to push the divs respectively.
.wrapper {
max-width: 1000px;
margin: 0 auto
}
.title {
width: 100%;
height: 100px;
background: green;
margin-bottom: 30px;
}
.outer {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col {
/* flex-grow, flex-shrink, flex-basis*/
flex: 0 0 31%;
margin: 1% 0 2% 0;
height: 300px;
}
.col1 {
background-color: red;
margin-right: auto;
}
.col2 {
background-color: blue;
margin-left: auto;
}
.col3 {
background: black;
}
#media only screen and (max-width: 960px) {
.col {
flex: 0 0 48%;
}
}
#media only screen and (max-width: 480px) {
.col {
flex: 0 0 100%;
}
}
<div class="wrapper">
<div class="title">
</div>
<div class="outer">
<div class="col col1">
</div>
<div class="col col2">
</div>
<div class="col col3">
</div>
</div>
</div>
Trying to arrange divs using Flexbox and not sure what I want to do is even possible.
Desired look at 769 pixels is to have column F expand down the entire height of the container on the left, and G and H stack on top of each other to the right (run the code snippet to see).
Once the screen resolution gets below 768 the look I have currently is the desired result for that view (F and G on the same row and H below spanning the width of both).
body {
background: #f5f5f5;
}
.wrap {
max-width: 1100px;
margin: 0 auto;
padding: 40px;
}
.title {
font-family: 'Montserrat';
font-size: 24px;
line-height: 30px;
display: inline-block;
vertical-align: middle;
}
.card {
margin: 20px 0;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
.container.show-border, .element.show-border {
border: 1px red solid;
padding: 9px;
}
.content {
color: #fff;
background-color: #cccccc;
padding: 20px;
font-family: 'Montserrat';
font-size: calc(1vw + 1em);
}
#media (max-width: 375px) {
.content {
padding: 5px;
font-size: 0;
text-indent: -9999999em;
}
}
.container, .element {
padding: 10px;
}
.flex {
display: flex;
box-sizing: border-box;
}
.row {
flex-flow: row wrap;
}
.col {
flex-flow: column wrap;
}
.element {
min-width: 100px;
}
.content {
flex: 1 100%;
}
.structure {
min-height: 480px;
}
.structure-2 {
flex: 1 44.4444444444%;
}
.f {
flex: 1 25%;
min-height: 480px;
}
.g {
flex: 1 75%;
}
.h {
flex: 1 75%;
}
#media (max-width : 768px ){
.structure-2, .f, .g {
flex: 1 50%;
min-height: 480px;
}
.h {
flex: 1 100%;
min-height: 480px;
}
}
<p>This table is a visual representation of what I am trying to accomplish at 769 px or higher. The view at 768 pixels or lower is as I want.</p>
<table width="200" border="1">
<tbody>
<tr>
<td rowspan="2">F</td>
<td>G</td>
</tr>
<tr>
<td>H</td>
</tr>
</tbody>
</table>
<div class="wrap">
<div class="container card">
<div class="flex row structure">
<div class="flex row structure-2">
<div class="flex element f">
<div class="content"> F </div>
</div>
<div class="flex element g">
<div class="content"> G </div>
</div>
<div class="flex element h">
<div class="content"> H </div>
</div>
</div>
</div>
</div>
</div>
You could change the flex-direction after 769px;. Something like this:
#media (min-width: 769px ){
.structure-2{
flex-direction: column;
flex-wrap: wrap;
}
.element{
flex: 1 1 auto;
width:50%;
}
.f{
height:100%;
}
}
P.S. I changed also your #media (max-width : 1608px ) to #media (max-width : 768px ) to remove some conflicts.
body {
background: #f5f5f5;
}
.wrap {
max-width: 1100px;
margin: 0 auto;
padding: 40px;
}
.title {
font-family: 'Montserrat';
font-size: 24px;
line-height: 30px;
display: inline-block;
vertical-align: middle;
}
.card {
margin: 20px 0;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
.container.show-border, .element.show-border {
border: 1px red solid;
padding: 9px;
}
.content {
color: #fff;
background-color: #cccccc;
padding: 20px;
font-family: 'Montserrat';
font-size: calc(1vw + 1em);
}
#media (max-width: 375px) {
.content {
padding: 5px;
font-size: 0;
text-indent: -9999999em;
}
}
.container, .element {
padding: 10px;
}
.flex {
display: flex;
box-sizing: border-box;
}
.row {
flex-flow: row wrap;
}
.col {
flex-flow: column wrap;
}
.element {
min-width: 100px;
}
.content {
flex: 1 100%;
}
.structure {
min-height: 480px;
}
.structure-2 {
flex: 1 44.4444444444%;
}
.f {
flex: 1 25%;
min-height: 480px;
}
.g {
flex: 1 75%;
}
.h {
flex: 1 75%;
}
#media (max-width : 768px ){
.structure-2, .f, .g {
flex: 1 50%;
min-height: 480px;
}
.h {
flex: 1 100%;
min-height: 480px;
}
}
#media (min-width: 769px ){
.structure-2{
flex-direction: column;
flex-wrap: wrap;
}
.element{
flex: 1 1 auto;
width:50%;
}
.f{
height:100%;
}
}
<div class="wrap">
<div class="container card">
<div class="flex row structure">
<div class="flex row structure-2">
<div class="flex element f">
<div class="content"> F </div>
</div>
<div class="flex element g">
<div class="content"> G </div>
</div>
<div class="flex element h">
<div class="content"> H</div>
</div>
</div>
</div>
</div>
</div>
When device width is under 769px:
- class ".f" will take the whole width - 100%
- classes ".g, .h" will take the half width - 50%
#media (max-width: 769px) {
.f {
flex: 1 100%;
}
.g,
.h {
flex:0 50%;
}
}
I'm trying to build media query, which will be working like on the sketch. Any suggestion?
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: lightblue;
width: 100%;
padding: .5rem;
box-sizing: border-box;
}
.name {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 40px
}
.options {
display: flex;
flex-direction: row;
}
.option {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 80px;
}
.action {
background-color: white;
padding: 1rem;
margin: .25rem;
}
#media (max-width: 350px){
.name {order: 1}
.action {order: 2}
.options {order: 3}
.container {
flex-direction: column;
flex-wrap: wrap;
}
}
<div class="container">
<div class="name">Lorem ipsum</div>
<div class="options">
<div class="option">2</div>
<div class="option">3</div>
<div class="option">4</div>
</div>
<div class="action">
5
</div>
</div>
I have already started, but I'm not really satisfied :). I need something more stable, as I will want to use it here later.
https://codepen.io/danzawadzki/pen/mwPYMz
At this moment I'm changing order and flex-direction in media query, but it's not good enough. Box number 1 will contain name of the segment, so it should have fixed width. There will be multiple items like that in one column, so I would prefer to keep it looks clean with same proportions.
Use this may be it will work for you
#media (max-width: 350px){
.options {order: 3; flex:0 0 100%;}
.container {
flex-wrap: wrap;
}
}
If you change your #media and remove flex-direction: column and add flex-basis: 100% to the option, it will flow as your image shows
#media (max-width: 350px){
.options {
order: 1; flex-basis: 100%;
}
.container {
flex-wrap: wrap;
}
}
Note, I also removed the .name and .action rules, as they are not necessary
Fiddle demo
Stack snippet
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: lightblue;
width: 100%;
padding: .5rem;
box-sizing: border-box;
}
.name {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 40px
}
.options {
display: flex;
flex-direction: row;
}
.option {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 80px;
}
.action {
background-color: white;
padding: 1rem;
margin: .25rem;
}
#media (max-width: 350px){
.options {
order: 1; flex-basis: 100%;
}
.container {
flex-wrap: wrap;
}
}
<div class="container">
<div class="name">Lorem ipsum</div>
<div class="options">
<div class="option">2</div>
<div class="option">3</div>
<div class="option">4</div>
</div>
<div class="action">
5
</div>
</div>
Updated
By setting .options { flex-grow: 1; } and .option { flex: 1 1 80px; }, you can have the options/option elements to fill the remaining space on wider screens
Fiddle demo 2
Stack snippet 2
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: lightblue;
width: 100%;
padding: .5rem;
box-sizing: border-box;
}
.name {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 40px
}
.options {
flex-grow: 1;
display: flex;
}
.option {
background-color: white;
padding: 1rem;
margin: .25rem;
flex: 1 1 80px;
}
.action {
background-color: white;
padding: 1rem;
margin: .25rem;
}
#media (max-width: 350px){
.options {
order: 1; flex-basis: 100%;
}
.container {
flex-wrap: wrap;
}
}
<div class="container">
<div class="name">Lorem ipsum</div>
<div class="options">
<div class="option">2</div>
<div class="option">3</div>
<div class="option">4</div>
</div>
<div class="action">
5
</div>
</div>