Search code examples
cssresponsive-designmedia-queries

Do I need to add mediaqueries for every width range?

I'm reading some books and trying to create a responsive layout but still don't know how to cope with random windows sizes. I know there's a difference between devices and screen, I just can't figure out why can't control display when resizing the browser window.

It that a structure issue, wrong css code or I'm forgetting something?! I need to add mediaqueries for variable widths ranges?

An example: I set most sizes for devices (1204px, 768px, etc) works ok, but variable widths seems to act strange. I added then a mediaqueries such @media screen and (max-width: 1100px){ ... } but still I get issues on 720px or 620px etc.

I use display snipets from here.

Thanks for any help!

Solution

  • Silly me, I just found out that my code was messed: I had mediaqueries on wrong order so classes end up being ignored. Please refer to this topic.

    Thanks you all!