Menu
I'm trying to have two different layouts depending the device width, so I'd prefer to have the same HTML layout for both and simply use a media query in CSS.
On both devices, I'll have an image (represented by the green box) that's always to the top-left of the screen. And right beside it, is the title div which will always be in the same place as well.
The most problematic div is the description div. This div is supposed to be aligned with the title if it is on desktop, but it's supposed to sit all by itself underneath the picture if it is on mobile.
The following image was generated by using float, but using float is also not ideal because if the description div is long enough, it'll eventually flow to the left (on Desktop) which is not the desired look. On desktop, it should always be two clear columns, the description should not end up flowing underneath the image div.
I appreciate any guidance on how to do this with flexbox, thank you!
For reference, here is my attempt with float (note that I do not want to use float):
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2a {
border: 1px solid blue;
}
.div2b {
border: 1px solid red;
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div4a {
border: 1px solid blue;
}
.div4b {
border: 1px solid red;
clear: left;
}
</style>
</head>
<body>
<h2>On Desktop</h2>
<div class="div1">div1</div>
<div class="div2a">div2a - Title.</div>
<div class="div2b">div2b - Description.</div>
<br />
<h2>On Mobile</h2>
<div class="div3">div3</div>
<div class="div4a">div4a - Title.</div>
<div class="div4b">div4b - Description.</div>
</body>
</html>
794
This would be a possible solution. Note that you have provided dimensions of the image (green box) in your css code. I based this code on that.
Here is the Jsfiddle:
.div1 {
position: absolute;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2a {
border: 1px solid blue;
padding-left: 120px;
}
.div2b {
border: 1px solid red;
padding-left: 120px;
}
.div3 {
position: absolute;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div4a {
border: 1px solid blue;
padding-left: 120px;
}
.div4b {
margin-top:50px;
border: 1px solid red;
}<h2>On Desktop</h2>
<div class="div1">div1</div>
<div class="div2a">div2a - Title.</div>
<div class="div2b">div2b - Description.</div>
<br />
<h2>On Mobile</h2>
<div class="div3">div3</div>
<div class="div4a">div4a - Title.</div>
<div class="div4b">div4b - Description.</div>
#container {
display: flex;
flex-flow: column wrap;
height: 300px;
max-width: 100%;
border: 1px dashed black;
}
.div1 {
flex: 0 0 100%;
text-align: center;
background-color: lightyellow;
}
.div1 > img {
width: 150px;
}
.div2a {
width: calc(100% - 150px);
background-color: aqua;
}
.div2b {
width: calc(100% - 150px);
background-color: lightpink;
}
@media ( max-width: 600px) {
#container {
flex-direction: row;
height: auto;
}
.div1 {
flex-basis: 150px;
}
.div2a {
flex: 1;
}
.div2b {
flex-basis: 100%;
}
}<div id="container">
<div class="div1"><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div class="div2a">div2a - Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title </div>
<div class="div2b">div2b - Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description
Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description
Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
</div>You can use a margin on the desktop description to keep it from flowing on the left. Then clear the float on mobile.
.img {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.desktop .desc {
margin-left: 126px;
}
.mobile .desc {
clear: left;
}<div class="desktop">
<h2>On Desktop</h2>
<div class="img"></div>
<div class="title">title</div>
<div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description
Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description </div>
</div>
<div class="mobile">
<h2>On Mobile</h2>
<div class="img"></div>
<div class="title">title</div>
<div class="desc">Description</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
