The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Html match desktop and mobile, Buttons do not align
PinGuy
post Nov 1 2019, 10:31 AM
Post #1





Group: Members
Posts: 8
Joined: 1-November 19
Member No.: 27,028



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>
<!-- saved from url=(0030)http://localhost/descarga? -->
<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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 1 2019, 12:30 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PinGuy
post Nov 1 2019, 01:21 PM
Post #3





Group: Members
Posts: 8
Joined: 1-November 19
Member No.: 27,028



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%.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 1 2019, 02:01 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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

Attached Image

Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 1 2019, 02:14 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PinGuy
post Nov 1 2019, 03:32 PM
Post #6





Group: Members
Posts: 8
Joined: 1-November 19
Member No.: 27,028



@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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PinGuy
post Nov 1 2019, 04:03 PM
Post #7





Group: Members
Posts: 8
Joined: 1-November 19
Member No.: 27,028



All right, the problem was the "wrap" class. It's incredible that a single line completely changes the game smile.gif
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 2 2019, 06:32 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PinGuy
post Nov 2 2019, 10:49 AM
Post #9





Group: Members
Posts: 8
Joined: 1-November 19
Member No.: 27,028



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" biggrin.gif

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!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 2 2019, 11:10 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You are welcome. You may want to validate in the future. It solves many a problem. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:27 AM