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
Related
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.
I have a basic webpage, but the html or body elements are too wide and they make a scrollbar pop up at the bottom. The width of the html/body tag stay at 980px. This happens in the Chrome dev tool. Pick the responsive resizer. The html/body wont resize below 980px. Im concerned small devices will get the scroll bar.
<html>
<head>
<style>
.con {
display: flex;
flex-direction: row;
width:95%; justify-content: space-around;
}
html { width: auto; }
#one {
background-color: white;
width:600px; height: auto;
}
#two {
background-color: #aaa;
width: 500px; height:300px;
}
img { width:100%; }
#media (max-width: 1099px) {
.con {
flex-direction: column;
}
#one, #two { width:95%; margin: 0 auto; }
}
</style>
</head>
<body>
<div class="con">
<div id="one"><img src="images/backwide.jpg"></div>
<div id="two"><h1>Hello world</h1></div>
</div>
</body>
</html>
I tried setting the width of the html, I tried setting the width of the body too, but nothing worked. I am trying to keep the page neat. I understand that these elements are too wide, but they are unresponsive. This happens in Chrome's F12 responsize resizer tool.
Try to edit like that.
#one {
background-color: white;
max-width: 600px;
width: 100%;
height: auto;
float: left;
}
#two {
background-color: #aaa;
max-width: 500px;
width: 100%;
height: 300px;
float: left;
}
the simple method is to use max-width outside of the html elements so they will not make any scroll.I have added the wraper for all the body elements.
<html>
<head>
<style>
.con {
display: flex;
flex-direction: row;
width:95%; justify-content: space-around;
}
.my-wraper{max-width:100%; width:100%; height:auto;}
html { width: auto; }
#one {
background-color: white;
width:600px; height: auto;
}
#two {
background-color: #aaa;
width: 500px; height:300px;
}
img { width:100%; }
#media (max-width: 1099px) {
.con {
flex-direction: column;
}
#one, #two { width:95%; margin: 0 auto; }
}
</style>
</head>
<body>
<div class="my-wraper">
<div class="con">
<div id="one"><img src="images/backwide.jpg"/></div>
<div id="two"><h1>Hello world</h1></div>
</div>
</div>
</body>
</html>
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 have 2 div's in parent wrapper. I would like to make the following:
these 2 divs share 100% space in width, so there is no gap between them, everything is red color.
When you scale the wrapper down, div b falls into new line below div a (this behaves as it should), but in this case I want both divs to be 100% width, so they make 2 lines of red color.
Is it possible to do this just with css (no tables!) and no additional elements?
Making wrapper background color red to compensate for this is not the solution.
<div class="wrapper">
<div class="a">left</div>
<div class="b">right</div>
</div>
http://jsfiddle.net/EAkLb/75/
Just change the CSS to width:50%; for both a and b, add a media query to set them to 100% at smaller viewports.
.wrapper{
position: relative;
max-width: 400px;
height:30px;
background-color: #fff;
}
.a{
float: left;
background-color: red;
text-align: left;
width:50%;
height:30px;
}
.b{
float: right;
background-color: red;
text-align: right;
width:50%;
height:30px;
}
#media screen and (max-width: 500px) {
.a, .b {
width: 100%;
}
}
<div class="wrapper">
<div class="a">left</div>
<div class="b">right</div>
</div>
Flexbox can do that:
JsFiddle demo
.wrapper {
position: relative;
max-width: 400px;
height: 30px;
background-color: #fff;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.a {
background-color: red;
text-align: left;
flex: 0 0 110px;
height: 30px;
}
.b {
background-color: red;
text-align: right;
flex: 0 0 120px;
height: 30px;
}
#media screen and (max-width: 400px) {
.a,
.b {
flex: 1 0 100%;
}
}
<div class="wrapper">
<div class="a">left</div>
<div class="b">right</div>
</div>
Consider you are using CSS media queries, you can simply change the width and the css float property of your divs. It's not the modern way, but it's work.
.wrapper{
position: relative;
max-width: 400px;
height:30px;
background-color: #fff;
}
.a, .b {
float: left;
width: 50%;
}
.a{
background-color: red;
text-align: left;
height:30px;
}
.b{
background-color: red;
text-align: right;
height:30px;
}
#media screen and ( max-width: 400px ) {
.a, .b {
float: none;
width: 100%;
}
}
The beauty of flex is that mediaqueries can often be avoided.
Using a combination of flex with min-width and flex-wrap we can achieve the desired effect without a media query.
.wrapper{
position: relative;
max-width: 400px;
height:30px;
background-color: #fff;
display: flex;
flex-wrap: wrap;
}
.child {
flex-grow: 1;
background-color: red;
height:30px;
}
.a{
min-width:110px;
text-align: left;
}
.b{
min-width:120px;
text-align: right;
}
<div class="wrapper">
<div class="child a">left</div>
<div class="child b">right</div>
</div>
Here's a JSFiddle.
My solution uses also Flex - but I use a min-width attr. to tell the flex container when to switch to 2 lines
.wrapper{
position: relative;
max-width: 100%;
height:30px;
background-color: #fff;
display: flex;
flex-wrap:wrap ;
}
.a,.b {
background-color: red;
width:50%;
min-width:130px;
height:30px;
flex-grow:1;
flex-shrink:0;
flex-basis:50%
}
.b {
background-color:green;
text-align:right;
}
fiddle
use the slider to make the window smaller
I used green as back for the 'b' element