I have three horizontal divs in desktop screen, in mobile screen I want to make it aligned vertical taking the whole screen width. What CSS should i add to make it happen? Here is my code. thank you in advance.
#demo1 {
float: left;
width: 50%;
}
#div1 {
float: left;
background: green;
width: 25%;
}
#div2 {
float: left;
width: 50%;
background: red;
}
#div3 {
float: right;
width: 25%;
background: blue;
}
<div id="demo1">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
Use display:flex and #media queries
#demo1 {
width: 100%;
display:flex;
justify-content:space-between;
}
#div1 {
background: green;
width: 25%;
}
#div2 {
width: 50%;
background: red;
}
#div3 {
width: 25%;
background: blue;
}
#media (max-width:992px) {
#demo1 {
flex-direction:column;
}
#div1, #div2, #div3 {
width:100%;
}
}
<div id="demo1">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
Use display 'flex' #media query for mobile
#demo1 {
width: 100%;
display:flex;
justify-content:space-between;
}
#demo1 > div {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
#div1 {
background: green;
width: 25%;
}
#div2 {
width: 50%;
background: red;
}
#div3 {
width: 25%;
background: blue;
}
/*Mobie Screen*/
#media (max-width:800px) {
#demo1 {
flex-direction:column;
}
#demo1 > div {
width:100%;
}
}
<div id="demo1">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
Try using media queries, for example:
#media only screen and (max-width: 900px) {
demo1 {
display: flex;
flex-direction: column;
width: 100%;
}
}
Hope this helps.
Related
hope you could help me out, have two questions:
How do i simply reposition my main image of sunset 110px from the top.
and also how do i get my logo to flow exactly between the image and left-side.
if you know one or both answers, then please share your suggestion in code. big thx again.
example as follows:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: #6B6B6B;
}
img {
display: block;
max-width: 100vh;
max-height: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#logo {
position: absolute;
top: 110px;
left: 10%;
width: 123px;
margin-left: -61.5px; /* half width */
}
</style>
<div id="logo"><img src="http://wizzfree.com/pix/logo2.png"></div>
<img src="http://wizzfree.com/pix/vid.jpg" style="width:100%;">
How about like this:
(Updated to add a 3rd column and media queries)
body {
background-color: #6B6B6B;
margin:0;
}
img {
display: block;
max-width: 100vh;
max-height: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#container {
margin-top: 110px;
position: relative;
display: block;
background-color: red;
text-align: center;
}
#inner {
position: relative;
background-color: green;
display: inline-block;
}
#col1, #col2, #col3 {
width: 100%;
}
#col1, #col3 {
min-width: 123px;
background-color: lightblue;
}
/* column widths defined in CSS */
#media only screen and (min-width: 400px) {
#inner {
display: flex;
flex-direction: row;
}
#col1, #col3 {
width: 30%;
}
#col2 {
width: 40%;
}
}
/* column widths adjust to image size */
#media only screen and (min-width: 600px) {
#inner {
display: inline-block;
}
#col1, #col3 {
position: absolute;
display:block;
top:0;
bottom: 0;
width:calc(50vw - 50%);
}
#col1 {
left: calc(50% - 50vw);
}
#col2 {
width:auto;
}
#col3 {
right: calc(50% - 50vw);
}
}
<div id="container">
<div id="inner">
<div id="col1">
<img src="http://wizzfree.com/pix/logo2.png">
</div>
<div id="col2">
<img src="http://wizzfree.com/pix/vid.jpg" style="width:100%;">
</div>
<div id="col3">
<p>Lorem ipsum</p>
</div>
</div>
</div>
I can't seem to get the red div stack on top of the blue when the width gets to the specified width from the #media declaration.
.descleft {
background-color:blue;
float: right;
width: 250px;
min-height: 50px;
}
.descright {
overflow: hidden;
min-height: 50px;
background-color:red;
}
#media (max-width:700px) {
.descleft{
width:100%;
}
.descright{
width:100%;
}
}
<div class="descleft"></div>
<div class="descright"></div>
http://jsfiddle.net/SpSjL/6580/
I think the easiest way to accomplish what you want is using flexbox. Here is how I was able to implement it:
HTML
<div class="container">
<div class="descright"></div>
<div class="descleft"></div>
</div>
CSS
.container {
display: flex;
}
.descleft {
background-color:blue;
width: 250px;
min-height: 50px;
}
.descright {
overflow: hidden;
min-height: 50px;
background-color:red;
width: 100%;
}
#media (max-width:700px) {
.container {
flex-direction: column;
}
.descleft {
width:100%;
}
.descright {
width:100%;
}
}
You can find a working demo here: http://jsfiddle.net/SpSjL/6631/
For more information about flexbox check this MDN links: https://developer.mozilla.org/en-US/docs/Glossary/Flexbox
Is it possible to stack right side div over the left sided div in mobile view with the help of CSS? The default behavior is the right sided div floats under the left sided div.
CSS:
.left {
position: relative;
float: left;
background: #F48024;
width:576px;
height: 324px;
}
.right {
position: relative;
float: left;
background: #EFF0F1;
width:576px;
height: 324px;
}
HTML:
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
Trying to achieve 3rd layout of this diagram.
You can achieve this by using flex box! Change Your css to this:
.main{
display:flex;
flex-wrap:wrap;
justify-content: center;
}
.left {
position: relative;
background: #F48024;
width:576px;
height: 324px;
}
.right {
position: relative;
background: #EFF0F1;
width:576px;
height: 324px;
}
#media screen and (min-width:1152px){
.main {
justify-content: space-between;
}
.left {
order:2;
}
.right {
order:1;
}
}
order property determines which element stacks first. You can read more about flex box here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This may serve as a quick fix:
#media screen and (max-width:480px){
.main {
display: flex;
flex-direction: column-reverse;
}
}
Note:
You may have to use other flex related css props too to align and justify the content with in the div props like justify-content and align-items.
But if you have many div elements, all of them will be reversed.
div-n
...
div-2
div-1
#media only screen and (max-width: 1000px) and (min-width: 200px) {
.div {
margin-top: 200px;
position: absolute;
display:flex;
flex-direction: column-reverse;
}
}
You can do something like this using media query:
div {
width: 500px;
height: 200px;
}
.left {
float: left;
background-color: yellow;
}
.right {
float: left;
background-color: green;
}
#media only screen and (max-width: 1000px) {
.left {
margin-top: 200px;
position: absolute;
}
.right {
position: absolute;
}
}
<div class="left">left</div>
<div class="right">right</div>
I have a couple divs, placed side by side and using a media query to stack them, which they do stack but I need the yellow one to be on top and the blue below it. So opposite of what you see when the script is ran and not sure on how to do it.
#wrapper {
width:1000px;
}
#mydivLeft {
background:blue;
height:250px;
width:50%;
float:left;
}
#mydivRight {
background:yellow;
height:250px;
width:50%;
float:right;
}
#media only screen and (max-width:768px){
#wrapper {
width:100%;
}
#mydivRight, #mydivLeft {
display:block;
float:none;
width:100%;
}
}
<body>
<div id="wrapper">
<div id="mydivLeft">
</div>
<div id="mydivRight">
</div>
</div>
</body>
you can use flexbox using order to reverse the order of how the elements are stacked
#wrapper {
width: 1000px;
max-width: 100%;
display: flex;
flex-wrap: wrap;
height: 250px;
}
#wrapper div {
flex: 1;
}
#mydivLeft {
background: blue;
}
#mydivRight {
background: yellow;
}
#media only screen and (max-width: 768px) {
#wrapper div {
flex: 0 100%
}
#mydivRight {
order: -1
}
}
<body>
<div id="wrapper">
<div id="mydivLeft">
</div>
<div id="mydivRight">
</div>
</div>
</body>
You can use flexbox layout. By default the flex-direction is row, in the media queries change it to column-reverse.
#wrapper {
max-width: 1000px;
display: flex;
}
#mydivLeft, #mydivRight {
flex: 1;
height: 250px;
}
#mydivLeft {
background: blue;
}
#mydivRight {
background: yellow;
}
#media only screen and (max-width: 768px) {
#wrapper {
flex-direction: column-reverse;
}
}
<div id="wrapper">
<div id="mydivLeft"></div>
<div id="mydivRight"></div>
</div>
You can just reverse the order of the divs in the HTML to be whatever order you want them to be.
#wrapper {
width:1000px;
}
#mydivLeft {
background:blue;
height:250px;
width:50%;
float:left;
}
#mydivRight {
background:yellow;
height:250px;
width:50%;
float:right;
}
#media only screen and (max-width:768px){
#wrapper {
width:100%;
}
#mydivRight, #mydivLeft {
display:block;
float:none;
width:100%;
}
}
<div id="wrapper">
<div id="mydivRight">
</div>
<div id="mydivLeft">
</div>
</div>
Alternatively, a more complicated solution is to use flexbox, and use the order property or flex-direction: column-reverse; to re-order the flex children.
#wrapper {
width: 1000px;
display: flex;
}
#wrapper > div {
width: 50%;
height: 250px;
}
#mydivLeft {
background: blue;
}
#mydivRight {
background: yellow;
}
#media only screen and (max-width:768px) {
#wrapper {
width: auto;
flex-direction: column-reverse;
}
#wrapper > div {
width: auto;
}
}
<div id="wrapper">
<div id="mydivLeft">
</div>
<div id="mydivRight">
</div>
</div>
I am trying to achieve a flexbox based transition from this (mobile):
To this (desktop):
However I am struggling to stack the two side panels vertically, my own code generates the main, search and other in a single row. I have not inserted webkit code for the sake of brevity.
Code:
p {
padding: 10px;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.header {
flex: 1 0 100%;
background-color: pink;
}
.search {
flex: 1 100%;
background-color: yellow;
}
.main {
flex: 1 100%;
background-color: lightblue;
}
.other {
flex: 1;
background-color: Red;
}
#media (min-width: 600px) {
.flex-container {} .search {
flex: 1 0;
order: 2
}
.main {
flex: 3 0;
order: 1;
}
.other {
flex: 1 0;
order: 3
}
}
<div class="flex-container">
<div class="header">
<p>header</p>
</div>
<div class="search">
<p>search</p>
</div>
<div class="main">
<p>main</p>
</div>
<div class="other">
<p>other</p>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/d2pmdvc4/
The problem here is that you can't really do that with Flexbox if your main elements (#main, #search and #other) are siblings unless you know the fixed height value of #search (hacky solution with position: absolute):
#header, .flex div {
padding: 1em;
box-sizing: border-box;
border: 1px solid red;
margin-bottom: 1em; }
.flex {
display: flex;
flex-direction: column;
position: relative; }
#main { min-height: 300px; order: 2; }
#other { order: 3; }
/* desktop version */
#media (min-width:768px) {
.flex { flex-direction: row; flex-wrap: wrap; }
#main { width: 60%; }
#search { order: 2; width: 40%; height: 100px }
#other { width: 40%; position: absolute; top: 100px; right: 0; }
}
<div id="header">header</div>
<div class="flex">
<div id="main">main</div>
<div id="search">search</div>
<div id="other">other</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/uhwzyr9b/
So logically you could try to wrap #search and #other inside another container but then you couldn't position #content between them because Flexbox can alter order of siblings only... The only workaround for that is probably JavaScript.
Edit: You can achieve your layout by using good old floats instead of Flexbox:
#header, #main, #search, #other {
padding:1em;
box-sizing:border-box;
border:1px solid red;
margin-bottom:1em;
}
#main { min-height: 300px; }
#media (min-width:768px) {
.container { overflow: auto; }
#main { width: 60%; float: left; }
#search { width:40%; float: right; }
#other { width:40%; float: right; }
}
<div id="header">header</div>
<div class="container">
<div id="search">search</div>
<div id="main">main</div>
<div id="other">other</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/g5vxtbed/