CODEWITHSUNDEEP
htmlcss
Tony
Tony

Reputation: 397

why is overflow overriding parent container width?

I have a media query that makes my container go to 90% width when the screen goes lower than 550px and when the password generator overflows it pushes the width to 500px instead of the 90%. How can i fix this? The overflow happens when I select one of the password options and set the length to 50.

Upvotes: 1

Views: 117

Answers (1)

dutchsociety
dutchsociety

Reputation: 583

Oof this website is hurting my eyes a bit,

Well it is because you are using flexbox on the body, to fix this try:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
body,
html {
    padding: 0;
    margin: 0;
    background-color: blueviolet;
    font-family: "Poppins", sans-serif;
    color: black;
    font-weight: 700;
}
.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
h2 {
    text-align: center;
    font-size: 1.1em;
}
#generatorContainer {
    width: 90%;
    border: 2px solid white;
    background-color: rgb(50, 64, 168);
    padding: 0.5em;
}
#passwordContainer {
    border-radius: 0.5em;
    background-color: #3399ff;
    overflow: auto;
}
.passwordFeaturesContainer {
    display: flex;
    justify-content: space-between;
    margin: 0.5em 0;
}
#generatePasswordButton {
    margin: 0 auto;
    width: 80%;
    display: block;
    height: 60px;
}
#generatePasswordButton {
    cursor: pointer;
    background-color: rgb(50, 168, 52);
    outline: none;
    box-shadow: none;
    color: rgb(50, 64, 168);
    font-size: 1.2em;
    font-weight: 700;
}
@media only screen and (min-width: 551px){
    #generatorContainer {
        
    width: 500px;
    }
}
<html lang="en"><head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Password Generator</title>
        <!-- custom css -->
        <link rel="stylesheet" href="style.css">
         <!-- favicon -->
         <link rel="shortcut icon" type="image/png" href="favicon.png">
    <script data-dapp-detection="">
(function() {
  let alreadyInsertedMetaTag = false

  function __insertDappDetected() {
    if (!alreadyInsertedMetaTag) {
      const meta = document.createElement('meta')
      meta.name = 'dapp-detected'
      document.head.appendChild(meta)
      alreadyInsertedMetaTag = true
    }
  }

  if (window.hasOwnProperty('web3')) {
    // Note a closure can't be used for this var because some sites like
    // www.wnyc.org do a second script execution via eval for some reason.
    window.__disableDappDetectionInsertion = true
    // Likely oldWeb3 is undefined and it has a property only because
    // we defined it. Some sites like wnyc.org are evaling all scripts
    // that exist again, so this is protection against multiple calls.
    if (window.web3 === undefined) {
      return
    }
    __insertDappDetected()
  } else {
    var oldWeb3 = window.web3
    Object.defineProperty(window, 'web3', {
      configurable: true,
      set: function (val) {
        if (!window.__disableDappDetectionInsertion)
          __insertDappDetected()
        oldWeb3 = val
      },
      get: function () {
        if (!window.__disableDappDetectionInsertion)
          __insertDappDetected()
        return oldWeb3
      }
    })
  }
})()</script></head>
    <body>
    <div class="flex">
        <form id="generatorContainer">
            <div id="passwordContainer">
                <h2>Password Generator</h2>
            </div>
            <div class="passwordFeaturesContainer">
                <label for="passLength">Password Length</label>
                <input type="number" step="1" min="4" max="50" id="passLength" required="">
            </div>
            <div class="passwordFeaturesContainer">
                <label for="lowerCase">Contain Lowercase Letters</label>
                <input type="checkbox" id="lowerCase" required="">
            </div>
            <div class="passwordFeaturesContainer">
                <label for="upperCase">Contain Uppercase Letters</label>
                <input type="checkbox" id="upperCase" required="">
            </div>
            <div class="passwordFeaturesContainer">
                <label for="numbers">Contain Numbers</label>
                <input type="checkbox" id="numbers" required="">
            </div>
            <div class="passwordFeaturesContainer">
                <label for="symbols">Contain Symbols</label>
                <input type="checkbox" id="symbols" required="">
            </div>
            <button type="submit" id="generatePasswordButton">Generate Password</button>
        </form>
        </div>
        <script src="main.js"></script>
    
</body></html>

I've added a flex div around the generator and added a class for flex as well... Try to avoid much styling on standard generated elements like html, body, script etc etc.. And please try start styling at a mobile perspective (most web users are commonly mobile users), so instead of using media-queries with max-width, use min-width: 551px; In your case you eventually dont need a media-query instead. If you are just using max-width: 500px; on your #generatorContainer its enough.

Happy coding!!

Upvotes: 1

Related Questions