Why will the paragraphs not stack? SOLVED


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.

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. :wink:

But I want it to float left when bigger than 700px screen width - I’ll go back and remove it and see what flows!! :slight_smile:

Shouldn’t it remain stacked until the required parameter for the media query becomes true as the float left is within the media query?

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

You were spot on!
I cant believe I missed those things but as the saying goes ‘sometimes you can’t see the wood for the trees’!!

Appreciate you taking the time to look at my code.


I misread the media query when I glanced over it. I was thinking it was a (max-width) query. My apologies.

No problem whatsoever - thanks for taking the time to look at my code in the first place :slight_smile: