diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css index 77a1826..a1e9f19 100644 --- a/src/components/Qrcode.css +++ b/src/components/Qrcode.css @@ -567,11 +567,11 @@ input[type="number"]{ } .div-btn { - white-space: nowrap; - overflow-x: hidden; - display: flex; justify-content: space-between; - margin-bottom: 10px; + width: calc((100vw - 46px) / 1); + display: flex; + display: -webkit-flex; /* Safari */ + flex-wrap: wrap; } .ul-btn { @@ -582,7 +582,7 @@ input[type="number"]{ cursor: pointer; font-size: 0.9em; line-height: 2em; - margin: 0; + margin: 0 0 10px; width: calc((100vw - 56px) / 2); border-radius: 3em; outline: none; @@ -603,6 +603,7 @@ input[type="number"]{ background: var(--bg-color); font-family: 'Futura', sans-serif; color: var(--input-font-color); + display: inline-block; } @media (min-width: 500px) { @@ -640,6 +641,7 @@ input[type="number"]{ } @media (min-width: 500px) { + .div-btn { max-width: 410px; } @@ -649,6 +651,12 @@ input[type="number"]{ } } +@media (min-width: 666px) { + .div-btn { + max-width: 620px; + } +} + .Qr-footer { color: var(--footer-font-color); margin-bottom: -1em;