my issue started on need have nice row same height in device using bootstrap 3. far ok... googled , found code here
/* row equal height columns */ .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; } so far good. but, in mobile device doesn't good... so, searched little bit more , found answers here. well, code @ end codepen. works? yeah.... kind of.... want is, when possible, row stacks in 2x2 column, image
like one
in small tablet portrait mode (600x800) , not 1 getting
the first image has less words second 1 show how want them.
well, , there issue too... if code on codepen, css works, reason, if leave second } closing "container" on styles....
yeah.... many issues in 1 thread.... so, summarize:
- why need leave second
}make works? - if don't need it, how make works then?
- how make columns stacks on 2x2 when small tablet portrait mode?
to me see responsive resolutions, use chrome add-on.
without using bootstrap @ all, can use flex-wrap: wrap wrap cells don't fit. flex still respect min-width , max-width, can use determine width.
.row-eq-height { display: flex; flex-wrap: wrap; } .row-eq-height > div { flex: 1; min-width: 300px; } .row-eq-height { display: flex; flex-wrap: wrap; } .row-eq-height > div { flex: 1; min-width: 300px; }<div class="row-eq-height"> <div style="background-color:#f89406;">col 1 <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here.</div> <div style="background-color:#00b16a;">col 2 <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here.</div> <div style="background-color:#4183d7;">col 3 <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here.</div> <div style="background-color:#f64747;">col 4 <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here.</div> </div>an alternative use flex-basis determine width. leaving flex-basis @ default of 0 means treat having no width, , stretch them fit. if set basis 50%, says should take half container if can. since it's set wrap, can go ahead , take half screen , push other elements next row. if had flex-wrap: nowrap shrink them down 25% instead. use different media queries force flex-basis different size.
for reason, setting flex-basis: 50% doesn't work when using bootstrap. there must conflicting css makes 50% take more half of container.
the code messier method because need specify each media query. i'd recommend min-width method because it's cleaner , easier, here's example using flex-basis , media queries in case:
.row-eq-height { display: flex; flex-wrap: wrap; } .row-eq-height > div { flex: 1; } @media (max-width: 1200px) { .row-eq-height > div { flex-basis: 25%; } } @media (max-width: 1000px) { .row-eq-height > div { flex-basis: 33%; } } @media (max-width: 800px) { .row-eq-height > div { flex-basis: 50%; } } @media (max-width: 600px) { .row-eq-height > div { flex-basis: 100%; } } .row-eq-height { display: flex; flex-wrap: wrap; } .row-eq-height > div { flex: 1; } @media (max-width: 1200px) { .row-eq-height > div { flex-basis: 25%; } } @media (max-width: 1000px) { .row-eq-height > div { flex-basis: 33%; } } @media (max-width: 800px) { .row-eq-height > div { flex-basis: 50%; } } @media (max-width: 600px) { .row-eq-height > div { flex-basis: 100%; } }<div class="row-eq-height"> <div style="background-color:#f89406;">col 1 <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here.</div> <div style="background-color:#00b16a;">col 2 <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here.</div> <div style="background-color:#4183d7;">col 3 <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here.</div> <div style="background-color:#f64747;">col 4 <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here. <br/>add content here.</div> </div>
Comments
Post a Comment