Question 43459 in Html Question posted in
Some basic documentation can be found here.

How to expand content to width of cellphone, but not laptops, etc.? – Html

I’m accustom to writing raw html and perl but have been out of the loop for a dozen years.

Like many people, I’d like my content to magnify to the width of a cellphone but not on larger devices where the example below works fine. How is this done?

<!DOCTYPE html>
<html><head>
    <title>fill-er-up</title>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <STYLE>
        html, body {margin: 0}
        body {
            background-color: #FFFFFF ;
            font-family: Helvetica, sans-serif ;
            color: #000000 ;
            font-size: large
        }
    </STYLE>
</head>
<body>
<center>
    <table style="border: none; padding: 0">
        <tr><td><svg width="48" height="48">
            <rect width="48" height="48" style="fill:#EAEA00"/></svg></td>
            <td><h1>&nbsp;test.html</h1></td>
        </tr>
    </table>
    a minor word or two
    <h2 style="color: red">A major proclamation</h2>
    &hyphen; more info &hyphen;<br>
    &hyphen; and another thing &hyphen;<br>
    &nbsp;<br>
    <form action="">
        <b>SELECT</b><br>
        &nbsp;<br>
        <table style="border: none; padding: 0">
            <tr><td>
                <input type="radio" id="A" name="R" value="A" checked>
                <label for="A">This way</label><br>
            </td></tr>
            <tr><td>
                <input type="radio" id="B" name="R" value="B">
                <label for="B">No that way</label><br>
            </td></tr>
        </table><br>
        <input type="submit" value="Submit">
    </form>
</center>
</body></html>

When tried on a few cellphones I tried, the text of the above example is tiny and only occupies the center 2/8 of the width as shown here:

screenshot

Tags:

2

Answers


  1. 0

    Try if this is what you want.
    I gave your center tag a class of "container" and changed the width in css as so

    <center class="container">
     ...your content...
</center>

    .container{
        max-width: 300px;
        margin: 0 auto;
    }

    You can change the width as you please

    Login or Signup to reply.
  2. 0

    You can use:
    1.<meta name="viewport" content="width=device-width, initial-scale=1.0" "close with greater than symbol"
    2. min width or max width
    3. width in % or px and margin = auto

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search