HTMLHelp Forums > Html match desktop and mobile

PinGuy

Nov 1 2019, 10:31 AM

Hi!

I am making a project with ESP8266, and creating a table with buttons. Problem is that it shows fine an aligned on desktop browsers, but on mobile browsers buttons change their size so it looks like a mess. I think I am missing a tag to fix it but I don't know which or where to place it. Or maybe a problem with my (basic) CSS coding... Here is the page:

CODE

<!DOCTYPE html>

<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Descarga de Registros</title>
    <script>
        function c(l) {
            document.getElementById('s').value = l.innerText || l.textContent;
            p = l.nextElementSibling.classList.contains('l');
            document.getElementById('p').disabled = !p;
            if (p) document.getElementById('p').focus();
        }
    </script>
    <style>
        .c,
        body {
            text-align: center;
            font-family: verdana
        }

        div,
        input {
            padding: 5px;
            font-size: 1em;
            margin: 5px 0;
            box-sizing: border-box;
        }

        input,
        button,
        .msg {
            border-radius: .3rem;
            width: 100%
        }

        button,
        input[type='button'],
        input[type='submit'] {
            cursor: pointer;
            border: 0;
            background-color: #229922;
            color: #fff;
            line-height: 2.4rem;
            font-size: 1.2rem;
            width: 100%
        }

        input[type='file'] {
            border: 1px solid #1fa3ec
        }

        .wrap {
            text-align: left;
            display: inline-block;
            min-width: 260px;
            max-width: 500px
        }

        a {
            color: #000;
            font-weight: 700;
            text-decoration: none
        }

        a:hover {
            color: #1fa3ec;
            text-decoration: underline
        }

        .q {
            height: 16px;
            margin: 0;
            padding: 0 5px;
            text-align: right;
            min-width: 38px;
            float: right
        }

        .q.q-0:after {
            background-position-x: 0
        }

        .q.q-1:after {
            background-position-x: -16px
        }

        .q.q-2:after {
            background-position-x: -32px
        }

        .q.q-3:after {
            background-position-x: -48px
        }

        .q.q-4:after {
            background-position-x: -64px
        }

        .q.l:before {
            background-position-x: -80px;
            padding-right: 5px
        }

        .ql .q {
            float: left
        }

        .q:after,
        .q:before {
            content: '';
            width: 16px;
            height: 16px;
            display: inline-block;
            background-repeat: no-repeat;
            background-position: 16px 0;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAQCAMAAADeZIrLAAAAJFBMVEX/// 8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADHJj5lAAAAC3RSTlMAIjN3iJmqu8zd7vF8pz
cAAABsSURBVHja7Y1BCsAwCASNSVo3/v+/ BUEiXnIoXkoX5jAQMxTHzK9cVSnvDxwD8bFx8PhZ9q8FmghXBhqA1faxk92PsxvRc2CCCFdhQCbRkLoA
Q3q/wWUBqG35ZxtVzW4Ed6LngPyBU2CobdIDQ5oPWI5nCUwAAAAASUVORK5CYII=');
        }

        @media (-webkit-min-device-pixel-ratio: 2),
        (min-resolution: 192dpi) {
            .q:before,
            .q:after {
                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAAgCAMAAACfM+KhAAAALVBMVEX/// 8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAOrOgAAAADnRSTlMAESIzRG
Z3iJmqu8zd7gKjCLQAAACmSURBVHgB7dDBCoMwEEXRmKlVY3L//3NLhyzqIqSUggy8uxnhCR5Mo8xLt+14aZ7wwgsvvPA/ofv9+44334UXXngvb6XsFhO/VoC2RsSv9J7x8BnYLW+AjT56ud/uePMdb7IP8Bsc/ e7h8Cfk912ghsNXWPpDC4hvN+D1560A1QPORyh84VKLjjdvfPFm++i9EWq0348XXnjhhT+4dIbCW+WjZ
im9AKk4UZMnnCEuAAAAAElFTkSuQmCC');
                background-size: 95px 16px;
            }
        }

        .msg {
            padding: 20px;
            margin: 20px 0;
            border: 1px solid #eee;
            border-left-width: 5px;
            border-left-color: #777
        }

        .msg h4 {
            margin-top: 0;
            margin-bottom: 5px
        }

        .msg.P {
            border-left-color: #1fa3ec
        }

        .msg.P h4 {
            color: #1fa3ec
        }

        .msg.D {
            border-left-color: #dc3630
        }

        .msg.D h4 {
            color: #dc3630
        }

        dt {
            font-weight: bold
        }

        dd {
            margin: 0;
            padding: 0 0 0.5em 0;
            min-height: 12px
        }

        td {
            vertical-align: top;
        }

        .h {
            display: none
        }

        button.D {
            background-color: #dc3630
        }

        body.invert,
        body.invert a,
        body.invert h1 {
            background-color: #060606;
            color: #fff;
        }

        body.invert .msg {
            color: #fff;
            background-color: #282828;
            border-top: 1px solid #555;
            border-right: 1px solid #555;
            border-bottom: 1px solid #555;
        }

        body.invert .q[role=img] {
            -webkit-filter: invert(1);
            filter: invert(1);
        }

        input:disabled {
            opacity: 0.5;
        }

        hr {
            display: block;
            margin-top: .5em;
            margin-bottom: .5em;
            margin-left: auto;
            margin-right: auto;
            border-style: inset;
            border-width: 2px
        }

        input[type=checkbox]:not(old),
        input[type=radio]:not(old) {
            width: 2em;
            font-size: 1em;
            opacity: 0
        }

        input[type=checkbox]:not(old)+label,
        input[type=radio]:not(old)+label {
            display: inline;
            margin-left: -2em;
            line-height: 1.5em;
            height: 100%;
            width: 100%;
        }

        input[type=checkbox]:not(old)+label>span,
        input[type=radio]:not(old)+label>span {
            display: inline-block;
            width: .875em;
            height: .875em;
            margin: .25em .5em .25em .25em;
            border: .12em solid silver;
            border-radius: .25em;
            background: #f2f2f2;
            vertical-align: bottom
        }

        input[type=checkbox]:not(old):checked+label>span:before {
            content: '?';
            display: block;
            margin: 1px;
            width: 1em;
            color: #9c6;
            font-size: .875em;
            line-height: 1em;
            text-shadow: 0 0 .0714em #73994d;
            font-weight: 700;
        }

        input[type=radio]:not(old):checked+label>span>span {
            display: block;
            width: .5em;
            height: .5em;
            margin: .125em;
            border: .0625em solid #73994d;
            border-radius: .125em;
            background: #9c6
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h2 align="center">Registros</h2>
        <div style="text-align:center;">(Presionar para descargar)</div>
        <form method="POST" action="http://localhost/descarga?archivo=2019-Octubre-1.csv">
            <button type="submit" style="margin-top:10px;float:left;width:85%;line-height:20px;">2019-Octubre-1.csv
                <br><span style="font-size:small;">(256 bytes)</span></button>
        </form>
        <form action="http://localhost/descarga?confirmar=2019-Octubre-1.csv" method="POST">
            <button style="margin-top:10px;height:44px;float:right;width:15%;line-height:20px;font-size:x-small;" class="D">Eliminar</button>
        </form>
        <form method="POST" action="http://localhost/descarga?archivo=2019-Octubre-2.csv">
            <button type="submit" style="margin-top:10px;float:left;width:85%;line-height:20px;">2019-Octubre-2.csv
                <br><span style="font-size:small;">(256 bytes)</span></button>
        </form>
        <form action="http://localhost/descarga?confirmar=2019-Octubre-2.csv" method="POST">
            <button style="margin-top:10px;height:44px;float:right;width:15%;line-height:20px;font-size:x-small;" class="D">Eliminar</button>
        </form>
        <form method="POST" action="http://localhost/descarga?archivo=2019-Octubre-3.csv">
            <button type="submit" style="margin-top:10px;float:left;width:85%;line-height:20px;">2019-Octubre-3.csv
                <br><span style="font-size:small;">(256 bytes)</span></button>
        </form>
        <form action="http://localhost/descarga?confirmar=2019-Octubre-3.csv" method="POST">
            <button style="margin-top:10px;height:44px;float:right;width:15%;line-height:20px;font-size:x-small;" class="D">Eliminar</button>
        </form>
        <form method="POST" action="http://localhost/descarga?archivo=2019-Octubre-4.csv">
            <button type="submit" style="margin-top:10px;float:left;width:85%;line-height:20px;">2019-Octubre-4.csv
                <br><span style="font-size:small;">(256 bytes)</span></button>
        </form>
        <form action="http://localhost/descarga?confirmar=2019-Octubre-4.csv" method="POST">
            <button style="margin-top:10px;height:44px;float:right;width:15%;line-height:20px;font-size:x-small;" class="D">Eliminar</button>
        </form>
        <form method="POST" action="http://localhost/descarga?archivo=2019-Octubre-5.csv">
            <button type="submit" style="margin-top:10px;float:left;width:85%;line-height:20px;">2019-Octubre-5.csv
                <br><span style="font-size:small;">(12800 bytes)</span></button>
        </form>
        <form action="http://localhost/descarga?confirmar=2019-Octubre-5.csv" method="POST">
            <button style="margin-top:10px;height:44px;float:right;width:15%;line-height:20px;font-size:x-small;" class="D">Eliminar</button>
        </form>
        <form method="POST" action="http://localhost/descarga?archivo=2019-Octubre-6.csv">
            <button type="submit" style="margin-top:10px;float:left;width:85%;line-height:20px;">2019-Octubre-6.csv
                <br><span style="font-size:small;">(256 bytes)</span></button>
        </form>
        <form action="http://localhost/descarga?confirmar=2019-Octubre-6.csv" method="POST">
            <button style="margin-top:10px;height:44px;float:right;width:15%;line-height:20px;font-size:x-small;" class="D">Eliminar</button>
        </form>
        <div>
            <button style="margin-top:10px;background-color:gray;">Formatear Almacenamiento</button>
        </div>
        <div style="display:inline-block;">Almacenamiento total: <b>2072576 bytes</b>
            <br>Utilizado: <b>81920 bytes (96% libre)</b></div>
        <form action="http://localhost/">
            <button type="submit">Volver a Principal</button>
        </form>
    </div>
</body>

</html>

Thank you for help!

Christian J

Nov 1 2019, 12:30 PM

I can't check the page in a mobile browser, but in my Firefox (desktop) the "Eliminar" buttons are truncated. A guess is that the buttons' percentage widths have something to do with it.

Seems much of the CSS above is not used by any of the HTML, which is distracting when debugging. Also it's best to avoid inline styles since they too make it harder to understand the styling.

PinGuy

Nov 1 2019, 01:21 PM

Yeah, sorry about the unneeded code, I generate the same header and style data for every page. For the width of the buttons I estimated 85% and 15%, and thought it would be fixed to that. So Firefox also cuts the Eliminar buttons, like the mobile. On Chrome it looks as it should. Really don't know why the size changes between browsers if it's fixed at 85 and 15%.

pandy

Nov 1 2019, 02:01 PM

In the next latest version of FF the buttons aren't truncated but misaligned. In older gecko they look fine, or so I assume.

Click to view attachment

Click to view attachment

Christian J

Nov 1 2019, 02:14 PM

QUOTE(pandy @ Nov 1 2019, 08:01 PM)

In the next latest version of FF the buttons aren't truncated

You're right, seems my minimum font-size setting in Firefox makes the text spill out.

PinGuy

Nov 1 2019, 03:32 PM

@pandy, I don't know why you got the Eliminar buttons in green, to me they show in red.
But most importantly, why do they misalign if 85+15 = 100%? Should I use a div or something like that?

PinGuy

Nov 1 2019, 04:03 PM

All right, the problem was the "wrap" class. It's incredible that a single line completely changes the game

CODE

        .wrap {
            text-align: left;
            margin: auto;
            min-width: 260px;
            max-width: 500px
        }

I think the latest FF shows up fine with this change, right?

pandy

Nov 2 2019, 06:32 AM

Floating the Eliminar buttons left instead of right will fix the alignment.

The red color is missing because of the parse errors caused by the lines with base64 images (2 places). Probably nothing is read after this point in the style sheet.
https://jigsaw.w3.org/css-validator/validator

Side note - I haven't read more than needed to understand the problems, but I get the feeling you do too much, complicate things. For instance, why is .wrap made inline-block? You can center .wrap by giving it auto left and right margins without changing the display property. All you seem to use it for is centering, so what's the point in doing more than needed?

PinGuy

Nov 2 2019, 10:49 AM

QUOTE(pandy @ Nov 2 2019, 08:32 AM)

Floating the Eliminar buttons left instead of right will fix the alignment.

Great, I don't know why I thought I had to force it "right"

QUOTE

Side note - I haven't read more than needed to understand the problems, but I get the feeling you do too much, complicate things. For instance, why is .wrap made inline-block? You can center .wrap by giving it auto left and right margins without changing the display property. All you seem to use it for is centering, so what's the point in doing more than needed?

That you said is the story of my life, hahaha. I know I complicate things way too much.
I'm a newbie with CSS, but learning as I go.
Thanks @pandy!!

pandy

Nov 2 2019, 11:10 AM

You are welcome. You may want to validate in the future. It solves many a problem.