CODEWITHSUNDEEP
htmlcssmobilecross-browser
Howdy_McGee
Howdy_McGee

Reputation: 10645

Mobile Development and Width

So I am trying to develop a simple mobile website. It will go off a QR code to the page linked below. The problem is when I view it on my android phone, or apple phone it adds a huge width. Any suggestions would be great. Here's the link to the live version: http://www.trileafweb.com/promotion/index.html

Here's the HTML/CSS

Promotion

    <style>
        html,body
        {
            width: 400px;
            height: 200px;
        }
        h1{color:#00a94f;
            text-align:center;}
        p{
            font-weight:bold;
            font-size: 14;
            text-align:center;
            font-family:Arial;}
        img{
            position:relative;
            height:100px;
            width:200px;
            padding-left:100px;}
        #coupon{
            padding-top:15px;
            position:relative;
            border: 3px dashed;
            width: 400px;
            height:200px;
            border-radius:5px;}
    </style>
</head>

<body>
    <div id="coupon">
        <h1>Promotion</h1>
        <p>Promotion Texts</p>
        <p>Coupon Code: <span style="color:red; font-size:24;">xxx-xxx</span></p>
    </div>
</body>

Upvotes: 0

Views: 256

Answers (1)

sdleihssirhc
sdleihssirhc

Reputation: 42496

Are you including a meta tag telling the mobile browsers that you understand how their viewports work? Something like this:

<meta name="viewport" content="width=device-width" />

More information about why this is necessary:

If you think about it logically, it seems to make sense: mobile Safari took a look at the page and assumed it was a document designed for the desktop, which is true of the vast majority of websites. So it gave the website a width of 980 pixels and presented it zoomed out. Which is why we can’t read anything until we zoom into the page....

But this is no good! What we need to do is tell the browser that this webpage is optimized for mobile. And this is where the viewport metatag comes into the picture.

Upvotes: 3

Related Questions