CODEWITHSUNDEEP
htmlcssflexbox
Pleinair
Pleinair

Reputation: 449

Why does CSS flexbox not working with media query?

I have a flexbox container that contains 3 containers with a class name of column. I am trying to change all elements that have class name column to 100%. When i change my screen size smaller than 500px, css media query should change column width to 100%, but for some reason it does not. Any help would be appreciated.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>

<meta content="width=device-width, initial-scale=1" name="viewport" />  
<style>

.container{
    max-width:1000px;
    margin:0 auto;
    display:flex;
}


@media all and(max-width:500px){

    .column{
        width:100%;
    }
}

</style>
</head>

<body>

<div id="wrapper">

        <div class="container"> 
                <div class="column">
                  <h3>Column 1</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="column">
                  <h3>Column 2</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="column">
                  <h3>Column 3</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
        </div>

</div>

</body>
</html>

Upvotes: 2

Views: 1348

Answers (3)

jeprubio
jeprubio

Reputation: 18012

Changing the display or the flex direction of the container when the size is small should work:

@media all and (max-width:500px) {
    .column{
        width: 100%;
    }
    .container {
        display: block;
    }
}

Or:

@media all and (max-width:500px) {
    .column{
        width: 100%;
    }
    .container {
        flex-direction: column;
    }
}

as you can see in this demo:

https://codepen.io/jeprubio/pen/yLyGZPY

Upvotes: 3

Ti Hausmann
Ti Hausmann

Reputation: 974

Flexbox by default tries to put everything in one row. You can force change that behaviour with flex-wrap.

@media all and(max-width:500px){
  .container {
    flex-wrap: wrap;
  }
  .column{
    width:100%;
  }
}

Demo: https://codepen.io/timohausmann/pen/rNaoPpM

Upvotes: 1

Aer0
Aer0

Reputation: 3907

A flexbox'ed container is initially trying to use all of the space to share them among its childs. However you can avoid that by using flex-wrap: wrap;.

Keep in mind that you may have to adjust child container widths in order to work as expected.

Working demo.

Upvotes: 0

Related Questions