![]() |
![]() ![]() |
![]() |
PinGuy |
![]()
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! |
Christian J |
![]()
Post
#2
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,658 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. |
PinGuy |
![]()
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%.
|
pandy |
![]()
Post
#4
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 ![]() |
|
Christian J |
![]()
Post
#5
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 ![]() |
|
PinGuy |
![]()
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? |
PinGuy |
![]()
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
![]() 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 |
![]()
Post
#8
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,731 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? |
PinGuy |
![]()
Post
#9
|
Group: Members Posts: 8 Joined: 1-November 19 Member No.: 27,028 ![]() |
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 |
![]()
Post
#10
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 ![]() |
You are welcome. You may want to validate in the future. It solves many a problem.
![]() |
![]() ![]() |
![]() |
Lo-Fi Version | Time is now: 26th April 2024 - 03:04 PM |