stackoom
  简体   繁体   中英

FIeldset dont want to shrink below 360px

 原文  2021-04-18 18:02:54  7   1    html/ css/ width/ fieldset

Question

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>

1 answers

solution1
 0 ACCPTED  2021-04-19 18:10:36

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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Why is @media (max-device-width: 360px) affected by the @media (max-device-width: 1024px)? how to center the content of right div in center also when @media screen and (max-width : 360px) it should be at center Mobile browser positions elements as if the view is 360px wide, but renders images on the page at a higher resolution. How does this work? Why won't my table shrink below 170px in height? I want link to go 50px below anchor when class name of the menu is not "xxx" i want the input box and the search button combine? why the div is applicable of the margin i want that search from the top 40px below how to remove space below fieldset legend Shrink header on scroll and move content below synchronously CSS Transform with % convert from px dont work Image wont shrink to 200px in div, article not in div either
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM