search

midudev / midu.link

Create shorten urls easily with Cloudfare Workers
https://midu.link
32 stars 7 forks source link

overflow when using mobile #1

Closed yurigo closed 3 months ago

yurigo commented 4 months ago

Al visitar midu.link con un dispositivo movil el body tiene un desbordamiento.

imagen

yurigo commented 3 months ago

Esta issue se produce cuando los textbox hash to use for the link y auth code están en la misma columna y el ancho de la pantalla es muy estrecha. Para solucionarlo se añadieron las siguientes reglas css:

    div {
      display: flex;
      }

    @media (width < 400px) {
      div {
        flex-direction: column;
      }
    }

Cuando el ancho de la pantalla sea inferior a 400px los dos textbox se pondrán uno debajo del otro (solucionando el overflow).

Problema: El ancho de 400pxno es del todo preciso: iPhone 11 Pro Max y iPhone Xs Max tienen un ancho de 414px, iPhone 13 Pro Max y iPhone 12 Pro Max tienen un ancho de 428px, iPhone 14 Pro Max tienen un ancho de 430px.

Solución: Recomiendo utilizar width <= 430px