CODEWITHSUNDEEP
htmlcssmobileflexbox
emm
emm

Reputation: 3

(CSS) Flexbox and media queries for mobile

I've made a tiny website using flex, it has two columns, one is just text and the second is a picture. I thought it would wrap automatically on mobile, but it doesn't (mobile view in Firefox confused me quite a bit here).

I know it's very much a beginner problem, but I just don't know how to make it work. I guess I should use media queries, but I'm a bit confused. Should I make two separate style sheets, or just add queries to the CSS file? Is flex just a big waste of my time, should I just make the layout more static but dependable on device size?

I would greatly appreciate any advice or resources on this problem, because so far the media queries just won't "click" in my head and I don't know how to make this stupid layout responsive.

CSS:

#abt{
margin-top: 25%;
width: 100%;
display: flex;
flex-wrap: wrap;
}

#abttext{
padding: 0% 5% 0% 10%;
flex: 4;
}

#abtpic{
flex: 1;
}

HTML:

<div id="abt">
<div id="abttext"><h1>header</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<p></div>
        <div id="abtpic"><img src="picture.png"></div>
    </div>

Thanks.

Upvotes: 0

Views: 1985

Answers (1)

Asons
Asons

Reputation: 87293

You can use orientation in the media query, and change the flex direction to column when in portrait mode

Stack snippet

.abt {
  width: 100%;
  display: flex;
}

.abttext {
  padding: 0 5vw 0 10vw;
  flex: 4;
}

.abtpic {
  flex: 1;
}

@media (orientation: portrait) {
  .abt {
    flex-direction: column;
  }
}


/* demo styles */

.abttext {
  height: 100px;
  background: red;
}

.abtpic {
  height: 100px;
  background: blue;
}
<div class="abt">

  <div class="abttext">

  </div>

  <div class="abtpic">

  </div>

</div>

Upvotes: 1

Related Questions