Menu
I am trying to change an website from fixed layout to a responsive layout but I am having problems setting up the html width. As you can see in the image below the width of html tag is 980px even if the page is empty, no css or js, just the html tags and doctype (the head and body are added automatically by browser):
For testing I am using the Google Chrome Dev Emulator set up as Apple Iphone, I also tested on a phone and still the page looks too big for the screen. Do you have any idea what to change to make my html tag width vanish?
262
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
Adjusting the Margin Size of an HTML Element With CSS This margin is automatically created by some browsers to allow for space between the edges of the viewport and the website content. You can remove this margin by setting the top and left margin to zero.
There is no default value of HTML width attribute.
The standard webpage size uses a maximum width of 1440 pixels for Desktops. This is because most desktop resolutions use a wider resolution nowadays (1920x1080). However, most websites are fully responsive nowadays, which means they won't use fixed dimensions.
It's your Dev Emulator. According to the Safari Web Content Guide by Apple (under "Examples of Viewports on iOS"), the default size of the viewport of the iPhone is 980px. The Dev Emulator is then...emulating that page size for you. If you want to make it go away, just turn off the emulator or adjust any settings it may have.
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
