I am missing something really obvious here but I’ve created a simple layout page to practice media queries. I cannot see why when the screen goes below 700px the two columns do not stack.
I would really appreciate it if anyone could have a quick look and point out the obvious to me please.
thankyou!!!
Try removing the float:left in your media query. The default document flow is stacked. If you remove the float, and adjust the other properties, such as width, margin, and padding, then it should work for you. Additionally, you could use the flexible box model.
your media query bracket is not surrounding your css. eg you have @media all (min-width:700px;){ } then your css … so put your css in between the media brackets …and then remove the extra closing bracket at bottom of css file. plus you have 700px**;** should be 700px …remove that … ran it in repl.it and dosent like the all after media (so maybe remove that too) but with those changes seems to work fine