HappyHands31
HappyHands31

Reputation: 4101

1, 2, 3 Column Layout From Mobile to Desktop With Flex

Here is what I'm going for:

enter image description here

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

Answers (3)

MaxiGui
MaxiGui

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;
  }

DEMO

.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>

DEMO - 2

.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

G-Cyrillus
G-Cyrillus

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

render of flex-wrapped image

Upvotes: 1

Syed Muhammad Moiz
Syed Muhammad Moiz

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

Related Questions