Reputation: 4101
Here is what I'm going for:
And I need to do it with Flex. But what I'm trying isn't working:
.content-wrapper,
.tablet-top,
.tablet-middle,
.tablet-bottom {
display: flex;
justify-content: center;
}
/*tablet*/
@media (min-width: 426px) and (max-width: 767px) {
.tablet-top,
.tablet-middle,
.tablet-bottom {
flex-direction: row;
}
.content-wrapper {
flex-direction: column;
}
}
/*mobile*/
@media (min-width: 0) and (max-width: 425px) {
.content-wrapper,
/* added */
.tablet-top,
.tablet-middle,
.tablet-bottom {
flex-direction: column;
align-items: center;
/* added */
}
}
<div class="content-wrapper">
<div class="tablet-top">
<div class="dog"><img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140"/>
<div class="cat"><img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140"/>
</div>
<div class="tablet-middle">
<div class="mouse"><img src="https://i.imgur.com/IqUglWY.png" height="100" width="140"/>
<div class="snake"><img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140"/>
</div>
<div class="tablet-bottom">
<div class="cow"><img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140"/>
<div class="pig"><img
src="https://i.imgur.com/rzKcrup.png"
height="100" width="140"/>
</div>
</div>
Wouldn't we need to add another div in the HTML for displaying dog
, cat
, and mouse
in a single row at desktop?
Wouldn't it break responsiveness if we did this? Also, my current code doesn't seem to be working at Tablet - it should be breaking the tablet-top
, tablet-middle
, and tablet-bottom
divs into three separate rows.
Upvotes: 2
Views: 2025
Reputation: 6348
First you forgot ,
on your CSS first line, you should write:
.tablet-middle, .tablet-bottom
instead of .tablet-middle .tablet-bottom
.
For the desktop, go like inline-flex
,
On the wrapper in your media queries add:
.content-wrapper{
display:flex;
flex-direction: column;
}
.content-wrapper{
display: flex;
}
/*mobile*/
@media (min-width: 0) and (max-width: 425px) {
.content-wrapper{
display:flex;
flex-direction: column;
}
.tablet-top, .tablet-middle, .tablet-bottom {
display:flex;
flex-direction: column;
}
}
/*tablet*/
@media (min-width: 426px) and (max-width: 767px) {
.content-wrapper{
display:flex;
flex-direction: column;
}
.tablet-top, .tablet-middle, .tablet-bottom {
display:flex;
flex-direction: row;
}
}
<div class="content-wrapper">
<div class="tablet-top">
<div class="dog"><img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140"/></div>
<div class="cat"><img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140"/></div>
</div>
<div class="tablet-middle">
<div class="mouse"><img src="https://i.imgur.com/IqUglWY.png" height="100" width="140"/></div>
<div class="snake"><img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140"/></div>
</div>
<div class="tablet-bottom">
<div class="cow"><img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140"/></div>
<div class="pig"><img
src="https://i.imgur.com/rzKcrup.png"
height="100" width="140"/></div>
</div>
</div>
.content-wrapper{
display:flex;
flex-wrap: wrap;
}
.content-wrapper > span{
width:100%;
max-width:33%;
flex: 0 0 33%;
}
/*mobile*/
@media (min-width: 0) and (max-width: 425px) {
.content-wrapper > span{
width:100%;
max-width:100%;
flex: 0 0 100%;
}
}
/*tablet*/
@media (min-width: 426px) and (max-width: 767px) {
.content-wrapper > span{
width:100%;
max-width:50%;
flex: 0 0 50%;
}
}
<div class="content-wrapper">
<span><img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140" /></span>
<span><img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140" /></span>
<span><img src="https://i.imgur.com/IqUglWY.png" height="100" width="140" /></span>
<span><img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140" /></span>
<span><img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140" /></span>
<span><img src="https://i.imgur.com/rzKcrup.png" height="100" width="140" /></span>
</div>
Upvotes: 2
Reputation: 105893
You have a few typos ( a ,
missing in between towo classes) and divs not closed around images.
You are also missing the alignement rules to center the whole things:
code fixed in the way i understand your expected result.
.content-wrapper,
.tablet-top,
.tablet-middle,/* here : , as missing */
.tablet-bottom {
display: flex;
justify-content: center; /* added */
}
/*tablet*/
@media (min-width: 426px) and (max-width: 767px) {
.tablet-top,
.tablet-middle,
.tablet-bottom {
flex-direction: row;
}
.content-wrapper {
flex-direction: column; /* added */
}
}
/*mobile*/
@media (min-width: 0) and (max-width: 425px) {
.content-wrapper, /* added */
.tablet-top,
.tablet-middle,
.tablet-bottom {
flex-direction: column;
align-items: center;
/* added */
}
}
/*desktop */
@media (min-width:768px) {
.content-wrapper {
flex-wrap: wrap;
}
.content-wrapper:before,
.content-wrapper:after {
content: '';
min-width: calc( 50vw - 280px);
}
[class^=tablet] {
display: contents;
}
.tablet-middle div:nth-child(2),
.tablet-bottom div {
order: 2;
}
.content-wrapper div:nth-child(3) {
border: solid;
}
:after {
order: 1;
}
}
<div class="content-wrapper">
<div class="tablet-top">
<div class="dog">
<img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140" />
</div>
<!-- close it ! -->
<div class="cat">
<img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140" />
</div>
<!-- close it ! -->
</div>
<div class="tablet-middle">
<div class="mouse">
<img src="https://i.imgur.com/IqUglWY.png" height="100" width="140" />
</div>
<!-- close it ! -->
<div class="snake">
<img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140" />
</div>
<!-- close it ! -->
</div>
<div class="tablet-bottom">
<div class="cow">
<img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140" />
</div>
<div class="pig">
<img src="https://i.imgur.com/rzKcrup.png" height="100" width="140" />
</div>
<!-- close it ! -->
</div>
</div>
to break into two rows your three containers, you will need to make them disseapear so your six img containers can be sibblings and wrap on 2 rows. , pseudos and order can be used to allow only 3 elements on the first line. (see the last mediaquerie) démo online https://codepen.io/gc-nomade/pen/VwWaxjM
Upvotes: 1
Reputation: 445
HTML:
.content-wrapper{
margin-top: 5rem;
margin-left: 7rem;
}
.tablet-top {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-column-gap: 9rem;
grid-row-gap: 5rem;
}
<div class="content-wrapper">
<div class="tablet-top">
<img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140" />
<img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140" />
<img src="https://i.imgur.com/IqUglWY.png" height="100" width="140" />
<img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140" />
<img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140" />
<img src="https://i.imgur.com/rzKcrup.png" height="100" width="140" />
</div>
</div>
Upvotes: 2