Home/ Questions/Q 6324043
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T16:38:00+00:00

So I am trying to develop a simple mobile website. It will go off

  • 0

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>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0