Hi I have a navigation div, which has a div on the bottom of it. This div has two other divs "DIV 1" and "DIV 2" (see on picture). Now I the navigation is closed on a tablet device, so I would show the second div which contains float: right over the first div which contains float: left, like in the picture. How can I do this? Now the first div is over the second. Thanks.
You can do this with Flexbox and media queries just change order of second element to order: -1 , here is Fiddle
.nav {
height: 200px;
display: flex;
align-items: flex-end;
border: 1px solid black;
}
.one {
background: #5B9BD5;
}
.two {
background: #FF0000;
}
.div {
flex: 1;
padding: 10px 0;
border: 1px solid black;
margin: 5px;
box-sizing: border-box;
}
#media(max-width: 480px) {
.nav {
flex-direction: column;
align-items: normal;
justify-content: flex-end;
}
.div {
flex: 0 0 50px;
}
.two {
order: -1;
}
}
<div class="nav">
<div class="div one">1</div>
<div class="div two">2</div>
</div>
You can use media queries for that purpose.
You can just manipulate your divs at some point to change their style.
#media (max-width: 600px) {
#someElement {
float: left;
}
}
You can try the following, along with media queries to remove the float at 800px:
JSFiddle: https://jsfiddle.net/7ws3m9Lx/
CSS:
.div1,.div2 { width: 50%; }
.div1 { float: left; }
.div2 { float: right; }
#media screen and (min-width: 0) and (max-width: 800px){
.div1,.div2 { float: none; width: 100%; }
}
HTML:
<div class="parent">
<div class="div2">DIV2</div>
<div class="div1">DIV1</div>
</div>
Related
I have div container in which two divs with background pictures.I style div container display grid and fix one div bigger than other. I want divs to stack on top (or take width 100%)for small screen size. Want to make it responsive.But not working. In original code I more divs. Here i just included two.
#main {
height: 300px;
display: grid;
grid-template-columns: auto auto auto;
}
.sub {
background-color: cadetblue;
margin: 10px;
}
#one {
grid-column-start: 1;
grid-column-end: 3;
background-image: url("https://image.shutterstock.com/image-
vector/floral-seamless-pattern-leaves-cordelia-600w- 1142315438.jpg");
}
#two {
background-image: url(https://image.shutterstock.com/image-
photo/colorful-flower-on-dark-tropical-600w-721703848.jpg)
}
#media screen and (max-width: 600px) {
#one,
#two {
width: 100%;
}
}
<div id="main">
<div class="sub" id="one">1</div>
<div class="sub" id="two">2</div>
Try to modify the media query to below:
#media screen and (max-width: 600px) {
#main {
grid-template-columns: auto;
}
#one {
grid-column-end: 2;
}
}
I would just use flex-box it's a lot easier to work with in my opinion. Just add a media query and change the flex-direction to row if you don't want them stacked on bigger screen sizes.
body {
margin: 0;
padding: 0;
}
.sub{
width: 100%;
height: 500px; /** can be whatever height you want **/
background-color: blue;
margin-top: 20px;
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/suburban-house-royalty-free-image-1584972559.jpg?resize=980:*");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div class="main">
<div class="sub" id="1"></div>
<div class="sub" id="2"></div>
</div>
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'd like to achieve the following with CSS only (left is mobile layout, right is desktop after breakpoint):
The challenge here obviously is that from a float point of view the element order changes: on mobile the green item is the second, but on desktop it's the first.
Is this possible to achieve with pure CSS? Possibility would be flex-box but I don't have enough experience to recreate this layout.
#container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 400px; /* 1 */
}
.box {
width: 50%;
}
.box1 {
background-color: lightgreen;
height: 400px;
}
.box2 {
background-color: orangered;
height: 200px;
}
.box3 {
background-color: aqua;
height: 200px;
}
#media (max-width: 600px) {
#container { height: auto; } /* 2 */
.box { width: 100%; }
.box2 { order: -1; } /* 3 */
}
/* purely decorative styles */
.box {
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
}
* { box-sizing: border-box; }
<div id="container">
<div class="box box1"><span>1</span></div>
<div class="box box2"><span>2</span></div>
<div class="box box3"><span>3</span></div>
</div>
jsFiddle
Notes:
Without a fixed height in a column wrap container, flex items don't know where to wrap. So, for your larger screen, define a height which forces the second item to a new column.
Now you're in a mobile layout and wrapping is no longer necessary. The container needs to be twice the height of the desktop layout. Release the height.
Tell the red box to re-position itself first on the list. (The initial order value for flex items is 0.)
Yes you can do this if you can set fixed height on flex-container. You just need to use flex-direction: column and flex-wrap: wrap and then change order with media-queries.
.content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.a {
height: 200px;
background: #00FF02;
}
.b {
height: 100px;
background: red;
}
.c {
height: 100px;
background: blue;
}
#media(min-width:768px) {
.content {
height: 200px;
}
.content > div {
width: 50%;
}
}
#media(max-width:768px) {
.b {
order: -1;
}
}
<div class="content">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
There is also no-flex solution, fiddle (just replace media-query min-width with whatever breakpoint you consider phone width ends):
HTML:
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
CSS:
div {
width: 50%;
}
.div1 {
background-color: red;
float: right;
height: 200px;
}
.div2 {
background-color: green;
float: left;
height: 400px;
}
.div3 {
background-color: blue;
float: right;
height: 200px;
}
#media (max-width: 500px) {
.div1, .div2, .div3 { width: 100%;}
}
When my website is full size, I have content in the footer aligned to the left and right, as follows;
<div class="site-info">
<span class="left">© Client 2016</span>
<span class="right">Site by<img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px" align="right"></span>
</div>
Using this CSS;
.right {
float: none;
}
.left {
float: none;
}
When the website is displayed on a phone, I want the content in the span classes to be displayed in the middle of the screen, with the '© Client 2016' text being displayed on one line, and the text/image link being displayed on another line below it, both centered. Any help is appreciated, thanks
Here is one way, using flexbox
.site-info {
background: lightgray;
overflow: auto;
}
.right img {
float: right;
}
#media screen and (max-width: 480px) {
.site-info {
display: flex;
flex-direction: column;
align-items: center;
background: lightgray;
}
.right {
display: flex;
align-items: center;
}
.right img {
margin-left: 10px;
}
}
<div class="site-info">
<span class="left">© Client 2016</span>
<span class="right">Site by <img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px"></span>
</div>
And if you can't/don't want flexbox, here is one without
.site-info {
background: lightgray;
overflow: auto;
}
.right a {
float: right;
}
#media screen and (max-width: 480px) {
.site-info > span {
display: block;
text-align: center;
}
.right * {
vertical-align: middle;
}
.right a {
float: none;
margin-left: 10px;
}
}
<div class="site-info">
<span class="left">© Client 2016</span>
<span class="right">Site by <img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px"></span>
</div>
/*Screens up to 480px wide*/
#media screen and (max-width: 480px) {
.left, .right {
text-align: center;
}
}
Add this to your css and if the screen size is less then 480px it will do this code instead.
You can read more about the #media rule here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I'm trying to create a layout for different resize. I need to reach the result in these images here:
I have this code:
.container {
position: relative;
display: flex;
align-items: stretch;
}
.item {
background-color: black;
box-sizing: border-box;
padding: 20px;
flex: 2;
color: #fff;
}
.item:nth-child(2) {
background-color: grey;
flex: 1
}
.item:nth-child(3) {
background-color: green;
flex: 0.5;
}
#media screen and (max-width: 990px) {
.container {
height: auto;
display: table;
}
.item:nth-child(2) {
float: left;
}
.item:nth-child(3) {
float: right;
}
}
<section class="container">
<div class="item">
<h2>title1</h2>
<hr>You'll notice that even though this column has far more content in it, instead of the other columns ending early, they size themselves to meet the end of this column vertically.</div>
<div class="item">
<h2>title2</h2>
<hr>Normally, the only way to achieve this would be either a hack, or to set all boxes to min-height.
</div>
<div class="item">
<h2>title3</h2>
<hr>This is a column with not much content.
</div>
</section>
Here there's a codepen https://codepen.io/darudev/pen/pyBrzL
Problem is in 990px resize view, I don't find solution to create the same view as "mockup".
Is there someone that can help me or give me some suggestions?
Thank you.
You don't need the table and float properties in your code.
#media screen and (max-width: 990px) {
.container {
height: auto;
display: table;
}
.item:nth-child(2) {
float: left;
}
.item:nth-child(3) {
float: right;
}
}
The entire layout can be made with flexbox.
Here's the solution: When the screen resizes smaller than 990px, allow flex items to wrap and give the first item a 100% width, which forces the following items to the next line.
.container {
display: flex;
}
.item {
background-color: black;
box-sizing: border-box;
padding: 20px;
flex: 2;
color: #fff;
}
.item:nth-child(2) {
background-color: grey;
flex: 1;
}
.item:nth-child(3) {
background-color: green;
flex: 0.5;
}
#media screen and (max-width:990px) {
.container { flex-wrap: wrap; }
.item:first-child { flex-basis: 100%; }
}
<section class="container">
<div class="item">
<h2>title1</h2>
<hr>You'll notice that even though this column has far more content in it,
instead of the other columns ending early, they size themselves to meet the end
of this column vertically.</div>
<div class="item">
<h2>title2</h2>
<hr>Normally, the only way to achieve this would be either a hack, or to set
all boxes to min-height.</div>
<div class="item">
<h2>title3</h2>
<hr>This is a column with not much content.
</div>
</section>
revised codepen