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>
Related
I have 3 div 1 header, Sidebar and main content. I have used flexbox. .main has 100vh height and .sidebar has 100px height and .main-content has 100% height. But it is viewed on mobile then empty space is shown between sidebar and main-content.
.main {
min-height: 100vh;
background-color: red;
display: flex;
flex-wrap: wrap;
}
.sidebar {
background-color: blue;
height: 100px;
width: 100%;
}
.main-content {
background-color: yellow;
height: 100%;
width: 100%;
}
#media (min-width: 768px) {
.main-content{
width: 80%;}
.sidebar {
width: 20%
}
}
<div>Header</div>
<div class="main">
<div class="sidebar">
sidebar
</div>
<div class="main-content">
main-content
</div>
</div>
You need to add flex-direction: column to main. And use flex-grow: 1 to main-content so it covers the remaining space ( if you want that )
The default property value is row. So main and sidebar are side by side and equal in height which is equal to the height of their container( default flex behavior )
.main {
min-height: 100vh;
background-color: red;
display: flex;
flex-wrap: wrap;
flex-direction:column;
}
.sidebar {
background-color: blue;
height: 100px;
width: 100%;
}
.main-content {
background-color: yellow;
flex-grow:1;
width: 100%;
}
#media (min-width:768px) {
.main-content{
width: 80%;}
.sidebar {
width: 20%
}
.main {
flex-direction:row;
}
}
<div>Header</div>
<div class="main">
<div class="sidebar">
sidebar
</div>
<div class="main-content">
main-content
</div>
</div>
Try this
#media (min-width: 768px) {
.main-content,
.sidebar {
width: 100%
height: 100%
}
}
For a height setting with a percentage value ( as in .sidebar and .main-content) the parent element of these (.main) needs to have a height setting defined, as a reference for their percentage value. min-height isn't sufficient in this case.
So, in .main, you could change min-height: 100vh to height: 100vh and add overflow-y: visible to allow it to get larger.
.main {
height: 100vh;
overflow-y:visible;
background-color: red;
display: flex;
flex-wrap: wrap;
}
.sidebar {
background-color: blue;
height: 100px;
width: 100%;
}
.main-content {
background-color: yellow;
height: 100%;
width: 100%;
}
#media (min-width: 768px) {
.main-content{
width: 80%;}
.sidebar {
width: 20%
}
}
<div>Header</div>
<div class="main">
<div class="sidebar">
sidebar
</div>
<div class="main-content">
main-content
</div>
</div>
Just remove "min-height: 100vh;" from the .main and your problem will be solved! :)
I would like to create a responsive card in HTML and CSS without using bootstrap like this:
It'd be better to use flex like this:
* {
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
height: 100vh;
flex-wrap: no-wrap;
}
.container div {
width: 50%;
height: 200px;
}
.picture {
background: #4451c2;
}
.text {
background: #f451c2;
}
#media (max-width: 600px) {
.container {
flex-direction: column;
}
.container div {
width: 100%;
}
}
<div class="container">
<div class="picture">picture</div>
<div class="text">Some text is here</div>
</div>
With #media rule where we will change width to 100% and flex-order to column.
P.S.: don't pay attention to the blocks's height, this is just for example how to solve your problem with screen size.
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%;}
}
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>
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