What’s wrong with these media queries?

[ooff]

Here’s my website: http://www.alweso.2ap.pl

It looks ok when resizing the browser, but turns out to be a disaster on mobile phones.

Here are some media queries that I’ve used – could somebody please take a brief look at them and tell me if there’s smth wrong with them?

@media only screen and (max-width : 480px) {}
@media only screen and (max-width : 650px) and (min-width : 481px) {}
@media only screen and (max-width : 1050px) and (min-width : 651px) {}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {}

and some others:

@media only screen and (max-width : 480px) and (orientation: portrait) {}
@media only screen and (max-width : 480px) and (orientation: landscape) {}
@media only screen and (min-width : 481px) and (max-width : 960px) and (orientation: portrait) {}
@media only screen and (min-width : 481px) and (max-width : 960px) and (orientation: landscape) {}
@media only screen and (min-width : 961px) and (orientation: portrait) {}
@media only screen and (min-width : 961px) and (orientation: landscape) {}

Or maybe any other ideas for why this website is a disaster on mobile devices? I’ve been using Mozilla Developer Tools to work on responsiveness and I thought I had it covered, today I put the website online and oops!

I’m a newbie, so please don’t be harsh with critics, I know the code is messy and so on – that was the project I’m using for learning.

[Author]

Posts