Search code examples
htmlcssresponsive-designmedia-queries

Meta viewport breaks responsibility (makes everything very small)

I have wordpress blog: https://blog.sznapka.pl on which I'd like to fix responsiveness on mobile. Without meta viewport, it looks pretty much okay. Only thing I want to fix, to make the header 100% and content to have a margin on the right. But can't do that, because CSS media queries are not respected. I've added debug:

@media (max-width: 600px) {
    #header-bottom {background: pink !important}
}

without meta viewport

When I use <meta name="viewport" content="width=device-width, initial-scale=1.0"> The layout is "zoomed-out" and looks very bad, but media queries are being respected.

with meta viewport

Anyone have an idea of how to make it display properly, with meta viewport enabled, so Media Queries works but without that ugly zoom-out?

Solution

  • Your #footer #footer-content uses 960px instead of 100%. Also your #footer-content2-left and #footer-content2-right use fixed width's aswell.