justregisteringtodownload
New Member
I wanted a simple website to look nicer on the iPhone so added\[code\]<meta name="viewport" content="width=device-width, initial-scale=1">\[/code\]to the html and some very simple media queries. They are basically just eyed using a browser on my computer to make things move when it makes most sense, not targeted specifically to any device widths. As a simple example, this is actually all I have for now:\[code\]@media only screen and (max-width : 600px){ html,body { background: blue; }}@media only screen and (max-width : 400px){ html,body { background: red; }}\[/code\]When I visit the page on the iPhone holding it in "portrait mode" the background is red. If I flip it to landscape the background goes blue. Great. However, if I zoom out, the header doesn't fill the entire width of the screen and it looks rather weird. The header is a simple block element without any width settings.Is there a simple way to fix this?
