Sumit Kumar Sumit Kumar - 13 days ago 6
CSS Question

CSS for phone and computer browsers

I need some help with CSS stylesheet
Please look at this website:
http://m.facebook.com

When I open this in a phone browser, it spreads across the entire screen. Left to right. That is how I want it in my CSS.
When I open this in a computer browser, it centers itself in the middle. Something like 600px wide. I also want this in my CSS.
This happens in all browsers like IE, firefox, chrome etc.

How can I do this?

My CSS is like this:
It works on computer browser, but doesn't spread across the screen on phone browsers...
Phone browser also shows it as a small centered content with lots of empty screen on both sides...

<html><head>
<style type="text/css">
body{ margin: 0px; padding: 0px; }
#page{ width: 600px; }
</style>
</head><body><center>
<div id="page">

All other content goes here

</div>
</center></body></html>

Answer

Try to put this in your head section:

<meta name="viewport" content="width=device-width, initial-scale=1">

if you want center it on PC browser you need this css code:

#page { width:100%;}
@media (min-width:768px) {
    #page { 
        width:600px;
        margin-left:auto;
        margin-right:auto;
        }
}