CODEWITHSUNDEEP
cssflexbox
wharfdale
wharfdale

Reputation: 752

Collapse flexbox column on mobile

I've got two columns (using flexbox) and a media query breakpoint. However I've tried the following css attributes to get the columns to be 100% and stack on top of each other when on mobile.

Currently remains as a column, side by side at all times.

width: 100%;
flex-grow: 1;

Code for the container

.flexbox-container {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

The code for the columns

.flexbox-column {
  display: flex;
    width: 100%;
    padding: 50px;
  background-color: yellow;
}

@media (min-width: 768px) {
  .flexbox-column {
    width: 50%;
    background-color: #444;
  }
}

My codepen (I don't know how to get the 'Run Code' feature to work on here) https://codepen.io/jordanc26/pen/yjWZQJ

Upvotes: 5

Views: 6430

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123438

Moving this rule

  .flexbox-container {
     display: flex;
  }

into the mediaquery scope is enough:
in fact, for narrow viewports, both your column elements are not in a flexbox container anymore, so they will stack on top of each other and they will extend for the entire available width

codepen demo

Upvotes: 4

Related Questions