0

I am having troubles with elements size with CSS on mobile.

The background image have 853x480 px, that's supposed to fit perfectly I am wrong?

It's really very very simple CSS code, why that is going on?

Desktop Responsive view: https://prnt.sc/j7d1jr

On desktop browsers the page fit perfectly, the elements like background image and inputs displays perfectly.

On mobile all that resize, all smaller

Iphone mobile view: http://prntscr.com/j7d0ej

How to fix that?

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Banco BRB</title>
    <style>
    body {
        background-image: url("bg_login.png");
        background-color: red;
        background-repeat: no-repeat;
        width:  820px;
        height: 480px;
    }
    </style>
</head>

<body>
    <br><br><br><br><br>
    <center><img src='user.png' height="75%" width="40%"></center>
    <br><br>
    <form>
        <center><label><input type="text"></label>
    </form>
</body>
Ignacio Ara
  • 2,476
  • 2
  • 26
  • 37
Ricardo Japa
  • 9
  • 1
  • 2
    don't give a fixed width and height to your body and use background size cover or contain - mobile phones vary in size, there is no fixed dimensions. Also center tag is obsolete and should not be used – Pete Apr 19 '18 at 13:16
  • 4
    Mobiles require a [viewport meta tag](https://stackoverflow.com/questions/14775195/is-the-viewport-meta-tag-really-necessary/14775557). – Turnip Apr 19 '18 at 13:17
  • Check HTML code, here's a `
    ` tag alone
     – Ignacio Ara Apr 19 '18 at 13:54
  • 1
    The second
    tag is not closed. You are missing a
    . Also you are missing a closing

    tag after

    – Gago Design Apr 19 '18 at 14:17
  • 1
    You shouldn't really be using `
    ` now... it's 2018.
     – Terry Apr 19 '18 at 14:19

0 Answers0