Menu
I'm having weird issue with displaying of my web page on mobile Chrome. I have a block centered horizontally and it is displayed just fine on desktop Chrome, but on mobile Chrome it sticks to the left border of the page.
After some research I realized that there is mobile "viewport" which is different from the screen size. Thus, it is not a simple task to have something centered.
The simplified markup I'm using:
<body>
<div class="block">
</div>
</body>
And the CSS:
body {
width: 100%;
margin: 0;
}
.block {
position: relative;
width: 1024px;
height: 768px;
background-color: red;
top: 44px;
margin: auto;
}
I've tried also centering the block using:
left: 50%;
margin-left: -512px;
position: absolute;
But that has the same effect. Also I've tried adding viewport metatag:
<meta name="viewport" content="width=device-width, initial-scale=1">
And it does not help either. My device has 1920x1080 hardware resolution and it does display the page with real width ~1200px or so, but the "device-width" is 640px by default and if I scale the page using multitouch, it still keeps left border at the initial position.
The best possible goal for me would be having the page fixed at some resolution (1200px is just fine and no scale required for my task) and the block to be centered. But I don't see the way to set the "device-width" to the real hardware pixel size and lock the scaling... (I know how to lock the scaling, but it does not help with the resolution and centering).
An example of the page where it can be easily reproduced: http://37.48.93.204/androidtest.htm
It works just fine at desktop Chrome, but has described issue on Android Chrome.
658
Assuming you're talking about horizontal centering:
The easiest way of centering something within it's container, would be to give it a fixed width, and then use margin-left: auto; and margin-right: auto;. This will center the element within it's container.
The best approach would be to set a max-width and play with margins as soon as the screen size is large enough.
Create a wide wrapper with the background image (horizontally centered) and limit the content inside that wrapper to a maximum of 1024px. Then let it resize when the screen is narrower then 1024px.
DEMO
HTML code example
<html>
<head>
<meta name="viewport" content="width=1224">
</head>
<body>
<div class="mainblock">
<div class="topside">
Top
</div>
<div class="content-wrapper">
<div class="content">
Content
</div>
</div>
<div class="bottomside">
Bottom
</div>
</div>
</body>
</html>
CSS code example
body {
width: 100%;
margin: 0;
}
.mainblock {
max-width: 1024px;
width: 100%;
height: 768px;
margin: 0 auto;
}
.content-wrapper {
background: url('http://lorempixel.com/1224/768/') no-repeat 50% 0;
display: block;
position: relative;
max-width: 1024px;
padding: 0;
}
.content {
background: salmon;
box-sizing: border-box;
min-height: 768px;
padding: 0;
max-width: 1024px;
width: 100%;
}
.topside,
.bottomside {
max-width: 1024px;
height: 50px;
background-color: blue;
margin: 0 auto;
}
@media only screen and (min-width: 1024px) {
.mainblock, .content-wrapper {
max-width: 1224px;
}
.content {
margin: 0 auto;
width: 1024px;
position: relative;
z-index: 2;
}
}
Edit:
Also add the viewport resetting meta tag to the head-section of your HTML code:
<meta name="viewport" content="width=1224">
Edit 2:
Created a new demo (http://codepen.io/anon/pen/dPzJPX) and updated the initial answer.
121
To adjust your page properly on the devices with various resolution you should use the CSS media queries. This way you can make the sizes of your elements dependent on the screen size. For example:
/* normal desktop */
.block {
width: 1024px;
}
@media only screen and (max-width: 1023px) /* notebook */
{
.block {
width: 800px;
}
}
@media only screen and (max-width: 793px) /* tablet */
{
.block {
width: 600px;
}
}
@media only screen and (max-width: 479px) /* old smartphone */
{
.block {
width: 400px;
}
}
Regarding the centering, it's a bad practice to trick the exact pixels as you try to do. There are more universal and reliable centering methods like Table based layout or Flexible Boxes model. For more information read the article Vertical centering of elements in HTML.
23
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
