CODEWITHSUNDEEP
htmlcssflexboxresponsive
Jason Fung
Jason Fung

Reputation: 69

How to make flexbox responsive and stack 1 on top of each other

I'm having trouble making my boxes stack on top of each other when scaled down to mobile size

The ancient way of scaling down using @media and setting width to 100% didnt seem to work with Flexbox

Here is my CSS:

.box {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  padding-bottom: 1em;
  text-align: center;
}

.box .column {
  flex: 1;
  background: lightgray;
  margin-right: 1em;
  padding: 1em;
  text-align: center;
}

JS Fiddle: https://jsfiddle.net/p650fdL4/

Desktop view has 3 equal square boxes next to each other, when in mobile the boxes don't stack

Desktop: Desktop

Mobile

Upvotes: 0

Views: 955

Answers (3)

Arindam Sarkar
Arindam Sarkar

Reputation: 224

check this i have already corrected this use flex: 0 0 100%; and max width:100% and flex-wrap: wrap; for wraping content https://jsfiddle.net/arindam1996/ungarj85/3/ . check this fiddle now

Upvotes: 0

S Roughton
S Roughton

Reputation: 73

At your chosen media query, set your container box element's flex direction to column:

@media screen and (max-width: ___rem) {
    .box { flex-direction: column; }
}

The default flex direction is row, which is what your columns are currently displayed in.

https://css-tricks.com/almanac/properties/f/flex-direction/

Upvotes: 1

just-a-web-designer
just-a-web-designer

Reputation: 371

You were very close. You need the width: 100% on the columns but flex box items don't wrap to new lines by default. You need to tell it to wrap on mobile using a media query.

In your mobile media query, make sure to include flex-wrap: wrap on the .box element

.box { display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; padding-bottom: 1em; text-align: center; flex-wrap: wrap;}
.box .column { flex: 1 1 100%; background: lightgray; margin-right: 1em; padding: 1em; text-align: center; }
<div class="box">
            <div class="column">
                <div class="columnBackground">

                    <h3 class="h3Color">We multiply your impact</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
            <div class="column">
                <div class="columnBackground">
                    <h3 class="h3Color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
                    <p>Some info</p>
                </div>
            </div>
            <div class="column">
                <div class="columnBackground">

                    <h3 class="h3Color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
                    <p>Some info</p>
                </div>
            </div>
        </div>

Upvotes: 1

Related Questions