Search code examples
htmlcsswidthfieldset

FIeldset dont want to shrink below 360px

i am trying to make simple currency conventer and i have problem to set fieldset properly. When i trying to resize site below 360px(or use smartphone view), fieldset stay in place when rest is smaller. I was trying use display:inlilne-block and min-width:0px When i set min-width, fieldset works but inputs stay in oryginal width... I have no idea what to do now :V Thanks for help.

let form = document.querySelector(".form");
let pln = document.querySelector(".form__currency--pln");
let usd = document.querySelector(".form__currency--usd");
let eur = document.querySelector(".form__currency--eur");
let gbp = document.querySelector(".form__currency--gbp");

form.addEventListener("submit", (event) => {
    event.preventDefault();
    let usdResult = pln.value / 3.79;
    let eurResult = pln.value / 4.54;
    let gbpResult = pln.value / 5.25;
    usd.value = usdResult.toFixed(2);
    eur.value = eurResult.toFixed(2);
    gbp.value = gbpResult.toFixed(2);
})
html {
    box-sizing: border-box;
}

*, ::after, ::before {
    box-sizing: inherit;
}

.body {
    font-family: "Open Sans", "sans-serif";
    margin:0 auto;
    max-width: 1000px;
    background-color: grey;
    color:white;
    font-size: 30px;
}
.form {
    max-width: 100%;
    margin: auto;
    text-align: center;
}

.form__fieldset {
    margin: 0 auto;
    border: 20px solid #05a9be;
}
.form__button {
    font-size: 30px;
    border: 6px solid #05a9be;
    padding: 5px;
    color: white;
    background-color: grey;
    margin: 5px;
}

.form__button:hover {
    background-color: rgb(170, 164, 164);
    text-decoration: none;
}

.form__currency {
    font-size: 25px;
}
.footer{
    margin:auto;
    background-color: #05a9be;
    text-align: center;
    margin:auto;
    margin-top: 40px;
}
<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="script/script.js"></script>
    <link href="style/style.css" rel="stylesheet">
    <link href="style/form.css" rel="stylesheet">
    <link href="style/footer.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
        integrity="sha512-oHDEc8Xed4hiW6CxD7qjbnI+B07vDdX7hEPTvn9pSZO1bcRqHp8mj9pyr+8RVC2GmtEfI2Bi9Ke9Ass0as+zpg=="
        crossorigin="anonymous" />

    <title>Przelicznik walut</title>
</head>

<body class="body">
    <form class="form">
        <div>
            <fieldset class="form__fieldset">
                <legend>Przelicznik walut</legend>
                <p>
                    <label class="form__label">
                        Kwota w PLN: <input class="form__currency form__currency--pln" min="0" type="number" step="any"
                            name="name" required placeholder="Wpisz kwotę" autofocus>
                    </label>
                </p>
                <button class="form__button">Przelicz</button><button type="reset" class="form__button">Wyczyść</button>
                <p>
                    <label class="form__label">
                        Kwota w USD: <input class="form__currency form__currency--usd" readonly>
                    </label>
                </p>
                <p>
                    <label class="form__label">
                        Kwota w EUR: <input class="form__currency form__currency--eur" readonly></label>
                </p>
                <p>
                    <label class="form__label">
                        Kwota w GBP: <input class="form__currency form__currency--gbp" readonly>
                    </label>
                </p>
            </fieldset>
        </div>
    </form>
    <footer class="footer">
        <p>&copyWojnowiak Paweł 2021</p>
    </footer>
</body>

</html>

Solution

  • Use rule max-width: 100% for all children of the fieldset tag. This will allow the children to take a width equal to the width of the window's viewport. To do this, add this to your css:

    .form__fieldset * {
    max-width: 100%;
}

    Also, override rule min-inline-size: min-content in tag fieldset. Must be overridden to min-inline-size: auto. Add this rule to class .form__fieldset:

    .form__fieldset {
    ...
    min-inline-size: auto;
}

    Your template is now responsive to the window viewport.

    let form = document.querySelector(".form");
let pln = document.querySelector(".form__currency--pln");
let usd = document.querySelector(".form__currency--usd");
let eur = document.querySelector(".form__currency--eur");
let gbp = document.querySelector(".form__currency--gbp");

form.addEventListener("submit", (event) => {
    event.preventDefault();
    let usdResult = pln.value / 3.79;
    let eurResult = pln.value / 4.54;
    let gbpResult = pln.value / 5.25;
    usd.value = usdResult.toFixed(2);
    eur.value = eurResult.toFixed(2);
    gbp.value = gbpResult.toFixed(2);
});
    html {
    box-sizing: border-box;
}

*,
::after,
::before {
    box-sizing: inherit;
}

.body {
    font-family: "Open Sans", "sans-serif";
    margin: 0 auto;
    max-width: 1000px;
    background-color: grey;
    color: white;
    font-size: 30px;
}

.form {
    max-width: 100%;
    margin: auto;
    text-align: center;
}

.form__fieldset {
    margin: 0 auto;
    border: 20px solid #05a9be;
    min-inline-size: auto;
}

.form__fieldset * {
    max-width: 100%;
}

.form__button {
    font-size: 30px;
    border: 6px solid #05a9be;
    padding: 5px;
    color: white;
    background-color: grey;
    margin: 5px;
}

.form__button:hover {
    background-color: rgb(170, 164, 164);
    text-decoration: none;
}

.form__currency {
    font-size: 25px;
}

.footer {
    margin: auto;
    background-color: #05a9be;
    text-align: center;
    margin: auto;
    margin-top: 40px;
}
    <!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script defer src="script/script.js"></script>
        <link href="style/style.css" rel="stylesheet" />
        <link href="style/form.css" rel="stylesheet" />
        <link href="style/footer.css" rel="stylesheet" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
            integrity="sha512-oHDEc8Xed4hiW6CxD7qjbnI+B07vDdX7hEPTvn9pSZO1bcRqHp8mj9pyr+8RVC2GmtEfI2Bi9Ke9Ass0as+zpg=="
            crossorigin="anonymous"
        />

        <title>Przelicznik walut</title>
    </head>

    <body class="body">
        <form class="form">
            <div>
                <fieldset class="form__fieldset">
                    <legend>Przelicznik walut</legend>
                    <p>
                        <label class="form__label"> Kwota w PLN: <input class="form__currency form__currency--pln" min="0" type="number" step="any" name="name" required placeholder="Wpisz kwotę" autofocus /> </label>
                    </p>
                    <button class="form__button">Przelicz</button><button type="reset" class="form__button">Wyczyść</button>
                    <p>
                        <label class="form__label"> Kwota w USD: <input class="form__currency form__currency--usd" readonly /> </label>
                    </p>
                    <p>
                        <label class="form__label"> Kwota w EUR: <input class="form__currency form__currency--eur" readonly /></label>
                    </p>
                    <p>
                        <label class="form__label"> Kwota w GBP: <input class="form__currency form__currency--gbp" readonly /> </label>
                    </p>
                </fieldset>
            </div>
        </form>
        <footer class="footer">
            <p>&copyWojnowiak Paweł 2021</p>
        </footer>
    </body>
</html>