Flexbox media query issue-CodePudding

I have a very simple two col layout and I am trying to make it responsive, but the media query keeps getting trumped.

<div >
  <div >1</div>
  <div >2</div>
</div>

Here is the CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 50%;
}

.flex-item-right {
  background-color: dodgerblue;
  padding: 10px;
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media screen and (max-width: 800px) {
  .flex-item-right.is-mobile, .flex-item-left.is-mobile {
    flex: 100% !important;
  }
}

Is CSS specificity at play here? Weird thing is it works on screen resizes but not on an actual mobile device.

CodePudding user response：

So I have to answer my own question so it will help someone else. The issue was I was not setting the viewport for the mobile devices, and the page was rendering in non-mobile viewport mode. From a different post:

You need to set your viewport meta tag to content="width=device-width, initial-scale=1". This tells the browser to render the width of the page at the width of the device's screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default).

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

CodePudding user response：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div >
    <div >
      1 of 2
    </div>
    <div >
      2 of 2
    </div>
  </div>

I suggest you use a bootstrap. There are different modes for responsiveness

https://getbootstrap.com/docs/4.0/layout/grid/

CodePudding user response：

width: 100%

for flex-item-left and flex-item-right

or this:

@media (max-width: 800px) {
    .flex-container {
        flex-direction: column;
    }
}