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> 5 Answers
Answers 1
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>Answers 2
#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>jsFiddle
Answers 3
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>Answers 4
This, unfortunately, isn't a candidate for flexbox – you have elements both lined up using rows and with columns.
I recommend going with absolute positioning instead. In the example below, the margin-left assigned to the description and title elements is the width of your image.
Since I have added in a media query, you'll want to expand the snippet and resize your browser to see the effect.
.container { position: relative; } @media screen and (min-width: 600px) { .image { position: absolute; left: 0; top: 0; } .description, .title { margin-left: 100px; padding-left: 10px; } }<div class="container"> <div class="title"> <h1>Title</h1> </div> <div class="image"> <img src="#" width="100px" height="100px"> </div> <div class="description"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ipsa ratione tenetur magnam veniam ducimus eius quos ipsum, culpa illum autem, quam repellendus ea, numquam omnis animi laudantium doloremque corporis?</p> </div> </div>Answers 5
There's a really simple addition for your code to make it work:
Add "overflow: hidden" to the description. Then it will not flow to the left when it is long enough.
The reason it works is because of something called "Block Formatting Context". This is basically one of the several ways of telling the browser that the content inside is an "isolated" block and should be treated as one.
See the following fiddle with your code working: https://jsfiddle.net/pkmewz3n/
.description-fixed { overflow: hidden; } 
0 comments:
Post a Comment