making two columns responsive in html

问题

Simple one probably. I've made a webpage and now need it to be responsive to a mobile at 375px;

In the html I have added:

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

My two columns are named in the html as follows:

#columnleft {
  float: left;
  width: 50%;
  text-align: center;
  background-color: #E8F8F5;
}

#columnright {
  float: right;
  width: 50%;
  text-align: center;
  background-color: #F4ECF7;
}

<div id="columnleft"> ..... </div>
<div id="columnright"> ..... </div>

I know i need to make a media query like this

   @media screen and (max-width: 375 px)

But nothing is working. The largest size is 1024 px only these two sizes matter for this project. Nothing in between. I need the two columns to stack up on top of each other rather than side by side

Any advice much appreciated, thanks

回答1:

make their width 100%

@media only screen and (max-width: 357px) {
  #columnleft, #columnright {
    width: 100%;
  }
}

来源：https://stackoverflow.com/questions/61354449/making-two-columns-responsive-in-html