400像素的CSS媒体查询无法正常工作

Question

Can someone tell me how to fix this media query issue.. https://jsfiddle.net/1z8sw4n5/19/

  .clear { clear: none; display: none; }  

I want at 400px to hide content column without breaking the yellow right float so blue and yellow touch seamlessly and hide red @400px or less

Answer 1

One of the problems is that the width of #left and #right are both 200px. When the browser is less than 400px the divs are forced to stack. If you set the width on both of them to 50% and use float: left then they can sit next to each other. You will also need to create a media query for #right and move the original #right css to above the media queries.

Here's a fix...

Codepen: https://codepen.io/anon/pen/ZyQVeg?editors=1100