The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
 
 Reply to this topicStart new topic
Replies
PinGuy
post Nov 1 2019, 04:03 PM
Post #2





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 #3


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

Group: WDG Moderators
Posts: 20,733
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 #4





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 #5


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

Group: WDG Moderators
Posts: 20,733
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

Posts in this topic
PinGuy   Html match desktop and mobile   Nov 1 2019, 10:31 AM
Christian J   I can't check the page in a mobile browser, bu...   Nov 1 2019, 12:30 PM
PinGuy   Yeah, sorry about the unneeded code, I generate th...   Nov 1 2019, 01:21 PM
pandy   In the next latest version of FF the buttons aren...   Nov 1 2019, 02:01 PM
Christian J   In the next latest version of FF the buttons aren...   Nov 1 2019, 02:14 PM
PinGuy   @pandy, I don't know why you got the Eliminar ...   Nov 1 2019, 03:32 PM
PinGuy   All right, the problem was the "wrap" cl...   Nov 1 2019, 04:03 PM
pandy   Floating the Eliminar buttons left instead of righ...   Nov 2 2019, 06:32 AM
PinGuy   Floating the Eliminar buttons left instead of rig...   Nov 2 2019, 10:49 AM
pandy   You are welcome. You may want to validate in the f...   Nov 2 2019, 11:10 AM

« Next Oldest · General Web Design · Next Newest »
 

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

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 28th April 2024 - 02:58 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC
IPS Driver Error  

There appears to be an error with the database.
You can try to refresh the page by clicking here.

Error Returned

We apologise for any inconvenience