CODEWITHSUNDEEP
androidhtmlcss
crazy sarah
crazy sarah

Reputation: 631

fixed width html layout on an android smart phone

I'm trying to build a simple layout where for the header there's a black band the full width of the screen, inside which there's a meant to be my logo, a little text etc... which should be contained within a fixed width column which is centered in the middle of the screen.

Underneath that there's a fixed column which is again centered but it's not wrapped in anything.

So I've built what I think should work and it looks fine on my PC but on my android smart phone there's a weird problem. If I make the fixed width 1000px wide then the header develops a strange gap on the right hand side. I can't figure out why.

you can see the problem here if you have a smart phone http://liquidlizard.net/narrower.php - just click between the two links. The only difference is in one screen the fixed width wrapper is 1000, the other 900px.

here's my code:

<div id="header">
    <div class="mainWrapnarrow">
        <div class="font16">Belfast<span class="strong">development</span></div>
    </div>
</div>

<div class="mainWrapnarrow border">
    <a href="narrower.php">Narrower</a>
    <br/><br/>
    <a href="index.php">wider</a>
</div>

and the css:

body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 35px;
        margin: 0px;
        padding: 0px;
    color:#ffffff;
}

.left{float:left;}
.right{float:right;}
.strong{font-weight:bold;}
.border{border:1px solid#999;}
.font16{font-size:16px;}

#header{background:#000000; border-bottom:1px solid #4e4b60; line-height:100px;width:100%}

.mainWrap {width:1000px; margin:0 auto;}
.mainWrapnarrow {width:900px; margin:0 auto;}

and a couple of screen shots attached Check out the white gap on the right of the screen on the second picture

enter image description here

enter image description here

Upvotes: 2

Views: 1264

Answers (2)

fahd4007
fahd4007

Reputation: 544

Use a media query

For example

@media (min-width:320px) { 
.mainWrapnarrow {width:90%; margin:0 auto;}
}

@media (min-width:481px) {
.mainWrapnarrow {width:90%; margin:0 auto;}
 }

@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
.mainWrapnarrow {width:90%; margin:0 auto;}

 }

check this css, let me know if this work fine with you and let the #header width to 100%

have a nice day ☺

Upvotes: 0

andrei
andrei

Reputation: 2940

You are setting the black background on the header div. The header div is smaller (980px) than the mainWrap div so that is why you have a gap of 20px.

The header div is 980px wide because

Most web browsers on Android (including Chrome) set the viewport to a large size by default (known as "wide viewport mode" at about 980px wide)

http://developer.android.com/guide/webapps/targeting.html

If you are trying to build a responsive site you should start by adding the viewport meta

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

and use media-queries to make your divs 100% of the screen on mobile devices and give them the desired width on desktop screens

Upvotes: 2

Related Questions