HTML images don't fit when Screen Shrinks-CodePudding

So I am brand new to html and css, and I'm following along with FreeCodeCamp's curriculum. For the second project, we are supposed to make a survey/form. I am happy with how mine turned out, except for the images that are within this project. They look fine to start, but since I am using absolute position, they move off screen when the windows is shrunk. Could someone offer me advice, or flame me if this is a very simple problem! Heres a link to itDylan'sProject



<body>
  <div id = "images">
    <img src = "https://bloximages.chicago2.vip.townnews.com/utdailybeacon.com/content/tncms/assets/v3/editorial/a/59/a590f336-79da-11ea-b083-1b27169260d3/5e8e39496be55.image.png" class = "nflx">
<img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Hulu_Logo.svg/1200px-Hulu_Logo.svg.png" class = "hulu">
<img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Disney+_logo.svg/800px-Disney+_logo.svg.png" class = "disney">
  </div>
  <h1 id = "title"> What is Your Favorite Show? </h1>
  <p id = "description"> Fill out the questions below to let us know! </p>
  
  <section id = "questions">
    <form id = "survey-form">
      <div>
        <label for = "name" id= "name-label" class = "boxheading">
          Name: <br>
        </label>
          <input type = "text"
                 id = "name"
                 placeholder = "Enter Your Name"
                 class = "boxes"
                 required>
      </div>
      <div>
        <label for = "email" id = "email-label" class = "boxheading" >
          Email: <br>
          <label>
            <input type = "email"
                   id = "email"
                   placeholder = "Enter your Email"
                   class = "boxes"
                   required>
            
            <label for = "number" id= "number-label" class = "boxheading">
              Enter Your Age:
            </label>
            <input type = "number" id = "number" placeholder = "Enter Your Age" min = 0 max = 125 class = "boxes">
            
            <label for = "show" id= "show-label" class = "boxheading">
              Enter Your Favorite Show:
            </label>
            <input type = "text" id = "show" placeholder = "Enter Your Favorite show" class = "boxes">
      </div>
      
           
            
          
          
          
          <div>
            <br>
            <img src = "https://www.hollywoodreporter.com/wp-content/uploads/2017/12/twd_806_jld_0619_1206-rt-h_2017.jpg" class = "rick">
            <img src = "https://images.ctfassets.net/3s5io6mnxfqz/5yaU9R8CfN7H3IFwlpjINO/41882ddd6ce99df47e11434a03ee6271/AdobeStock_138391201.jpeg?fm=jpg&w=900&fl=progressive" class = mystery>
            <label for "dropdown" id = "dropdown-label" class = "boxheading">Select Your Level Of Netflix Watching: </label>
            <select name = "dropdown" id = "dropdown">
              <option value = "AVID NETFLIXER">AVID NETFLIXER</option>
              <option value = "Consistent Viewer">Consistent Viewer</option>
              <option value = "Casual Viewer">Casual Viewer</option>
              <option value = "Weekender Only">Weekender Only</option>
              <option value = "Once a Month or Less">Once a Month or Less</option>
            </select>
              </div>
            
            <div>
              <br>
              <label for = "Genre" class = "genreheading" >Select Your Favorite Genre</label>
             <ul id = "Genre" name = "genre" class=boxheading>
               <li>
              <input type = "radio" name = "genre" value = "sci-fi"><label for"sci-fi" class = genrelabel>Sci-Fi</label>
               </li>
              <li>
              <input type = "radio" name = "genre" value = "romance"><label for "romance" class = genrelabel>Romance</label>
               </li>
               <li>
              <input type = "radio" name = "genre" value = "thriller"><label for "thriller" class = genrelabel>Thriller</label>
               </li>
               <li>
              <input type = "radio" name = "genre" value = "comedy"><label for = "comedy" class = genrelabel>Comedy</label>
               </li>
              </ul>
            </div>
            
            <div>
              <p id = "likesHeading"> Select The Characters You Like: </p>
              <div id = "checks">
              <input type = "checkbox" id = "Char1" name = "Char1" value = "Michael-Scott">
              <label for = "Char1">Michael Scott</label>
              <br>
              <input type = "checkbox" id = "Char2" name = "Char2" value = "Walter-White">
              <label for = "Char2">Walter White</label>
              <br>
              <input type = "checkbox" id = "Char3" name = "Char3" value = "Eren-Yeager">
              <label for = "Char3">Eren Yeager</label>
              <br>
              <input type = "checkbox" id = "Char4" name = "Char4" value = "Rick-Grimes">
              <label for = "Char4">Rick Grimes</label>
              </div>
              
              
            </div>
            
            <div id = "comments">
              <br>
              <p> Enter Additional Comments Below</p>
              <textarea id = "Additional-Comments" name = "Additional-Comments" placeholder ="Enter Additional Comments"></textarea>
              
              
            </div>
          <br>
            <input type = "submit" id = "submit" name = "submit" >
          </br>
          
    </form>
    
  </section>
  
  
  
</body>

**** css
html {
    padding:0;
    margin:0;
    font-family: "Trebuchet MS"
}
html{
  background-image: url("https://d31xsmoz1lk3y3.cloudfront.net/games/images/map_img_903268_1481738041.jpg");
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
}
body{
  background:  #ff3333;
  width: 50%;
  border-radius: 1.8%;
  opacity: 88%;
  margin-left:auto;
  margin-right:auto;
  min-width:400px;
  
}

#title{
  margin-top 10%;
  padding-top: 10%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
 
}
#description{
 margin-bottom: 6%;
  text-align:center;
}


.boxheading{
  font-size: 20px;
  margin-left: 4%;
  line-height: 2em;
 
}
.boxes{
  width: 90%;
  height: 40px;
  border-radius: .25rem;
  margin-left: 4%;
  font-size: 20px;
}

#dropdown{
  width: 45%;
  height: 40px;
  border-radius: .25rem;
  font-size: 1rem;
  
}

.genreheading{
  font-size: 20px;
  margin-left: 4%;
  line-height: .25em;
}
#Genre{
  list-style: none;
  font-size: 20px;
  margin-left: -1.5%;
  line-height: 1.7em;
  
}
.genrelabel{
  margin-left: 5px;
}

#checks{
  line-height: 1.8em;
  margin-left: 4%;
  font-size: 1.2em;
}
#likesHeading{
  font-size: 20px;
  margin-left: 4%;
  line-height: .1em;
  padding-top: 1em;
  min-width: 1000px;
}
#comments{
  text-align: center;
  font-size: 20px;
}
#submit{
  text-align: center;
  display:block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: 4em;
  background-color: #80ff80;
  margin-bottom: 20px;
  border-radius: 2rem;
  font-family: calibri;
  font-size: 20px;
}
#Additional-Comments{
  width: 20em;
  height: 10em;
}
/* Image stuff here */
.rick{
  width: 300px;
  height: auto;
  position:absolute;
  top: 858px;
  left: 759px;
  border-radius: .5em;
}
.mystery{
  position:absolute;
  width: 300px;
  height: auto;
  top: 650px;
  left: 759px;
  border-radius: .5em;
}
.nflx{
  width: 150px;
  height:auto;
  position:absolute;
 top:60px;
  left:400px;
  transform: rotate(328deg);
}
.hulu{
  width: 100px;
  height: auto;
  position: absolute;
  top:80px;
  left: 990px;
  transform: rotate(40deg);
}
.disney{
  width: 150px;
  height: auto;
  position: absolute;
  top: 140px;
  left: 950px;
}

CodePudding user response：

Don't use position: absolute or your content will go off the screen. You must use relative measurements such as % or rem and not set your position to absolute.

CodePudding user response：

Here you can play this original code you have that I edited a littl and I agree you need to focus on flex box. and start learning media query.

html {
    padding:0;
    margin:0;
    font-family: "Trebuchet MS"
}
html{
  background-image: url("https://d31xsmoz1lk3y3.cloudfront.net/games/images/map_img_903268_1481738041.jpg");
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
}
body{
  background:  #ff3333;
  width: 50%;
  border-radius: 1.8%;
  opacity: 88%;
  margin-left:auto;
  margin-right:auto;
  min-width:400px;
  
}

#title{
  margin-top 10%;
  padding-top: 10%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
 
}
#description{
 margin-bottom: 6%;
  text-align:center;
}


.boxheading{
  font-size: 20px;
  margin-left: 4%;
  line-height: 2em;
 
}
.boxes{
  width: 90%;
  height: 40px;
  border-radius: .25rem;
  margin-left: 4%;
  font-size: 20px;
}

#dropdown{
  width: 45%;
  height: 40px;
  border-radius: .25rem;
  font-size: 1rem;
  
}

.genreheading{
  font-size: 20px;
  margin-left: 4%;
  line-height: .25em;
}
#Genre{
  list-style: none;
  font-size: 20px;
  margin-left: -1.5%;
  line-height: 1.7em;
  
}
.genrelabel{
  margin-left: 5px;
}

#checks{
  line-height: 1.8em;
  margin-left: 4%;
  font-size: 1.2em;
}
#likesHeading{
  font-size: 20px;
  margin-left: 4%;
  line-height: .1em;
  padding-top: 1em;
  min-width: 1000px;
}
#comments{
  text-align: center;
  font-size: 20px;
}
#submit{
  text-align: center;
  display:block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: 4em;
  background-color: #80ff80;
  margin-bottom: 20px;
  border-radius: 2rem;
  font-family: calibri;
  font-size: 20px;
}
#Additional-Comments{
  width: 20em;
  height: 10em;
}
/* Image stuff here */
.rick{
  width: 300px;
  height: auto;
  position:relative;
  border-radius: .5em;
}
.mystery{
  position:relative;
  width: 300px;
  height: auto;
  border-radius: .5em;
}

span.img-2 {
  float:right;
  padding-right:5px;
  }
  
.nflx{
  width: 150px;
  height:auto;
  position:absolute;
 top:60px;
  left:400px;
  transform: rotate(328deg);
}
.hulu{
  width: 100px;
  height: auto;
  position: absolute;
  top:80px;
  left: 990px;
  transform: rotate(40deg);
}
.disney{
  width: 150px;
  height: auto;
  position: absolute;
  top: 140px;
  left: 950px;
}

@media only screen and (max-width:1024px){
span.img-2 {
 float:none;
 }
}

<body>
  <div id = "images">
    <img src = "https://bloximages.chicago2.vip.townnews.com/utdailybeacon.com/content/tncms/assets/v3/editorial/a/59/a590f336-79da-11ea-b083-1b27169260d3/5e8e39496be55.image.png" class = "nflx">
<img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Hulu_Logo.svg/1200px-Hulu_Logo.svg.png" class = "hulu">
<img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Disney+_logo.svg/800px-Disney+_logo.svg.png" class = "disney">
  </div>
  <h1 id = "title"> What is Your Favorite Show? </h1>
  <p id = "description"> Fill out the questions below to let us know! </p>
  
  <section id = "questions">
    <form id = "survey-form">
      <div>
        <label for = "name" id= "name-label" class = "boxheading">
          Name: <br>
        </label>
          <input type = "text"
                 id = "name"
                 placeholder = "Enter Your Name"
                 class = "boxes"
                 required>
      </div>
      <div>
        <label for = "email" id = "email-label" class = "boxheading" >
          Email: <br>
          <label>
            <input type = "email"
                   id = "email"
                   placeholder = "Enter your Email"
                   class = "boxes"
                   required>
            
            <label for = "number" id= "number-label" class = "boxheading">
              Enter Your Age:
            </label>
            <input type = "number" id = "number" placeholder = "Enter Your Age" min = 0 max = 125 class = "boxes">
            
            <label for = "show" id= "show-label" class = "boxheading">
              Enter Your Favorite Show:
            </label>
            <input type = "text" id = "show" placeholder = "Enter Your Favorite show" class = "boxes">
      </div>
      
           
            
          
          
          
          <div>
            <br>
            <span  >
            <img src = "https://www.hollywoodreporter.com/wp-content/uploads/2017/12/twd_806_jld_0619_1206-rt-h_2017.jpg" class = "rick"><br>
            <img src = "https://images.ctfassets.net/3s5io6mnxfqz/5yaU9R8CfN7H3IFwlpjINO/41882ddd6ce99df47e11434a03ee6271/AdobeStock_138391201.jpeg?fm=jpg&w=900&fl=progressive" class = mystery></span>
            <label for "dropdown" id = "dropdown-label" class = "boxheading">Select Your Level Of Netflix Watching: </label>
            <select name = "dropdown" id = "dropdown">
              <option value = "AVID NETFLIXER">AVID NETFLIXER</option>
              <option value = "Consistent Viewer">Consistent Viewer</option>
              <option value = "Casual Viewer">Casual Viewer</option>
              <option value = "Weekender Only">Weekender Only</option>
              <option value = "Once a Month or Less">Once a Month or Less</option>
            </select>
              </div>
            
            <div>
              <br>
              <label for = "Genre" class = "genreheading" >Select Your Favorite Genre</label>
             <ul id = "Genre" name = "genre" class=boxheading>
               <li>
              <input type = "radio" name = "genre" value = "sci-fi"><label for"sci-fi" class = genrelabel>Sci-Fi</label>
               </li>
              <li>
              <input type = "radio" name = "genre" value = "romance"><label for "romance" class = genrelabel>Romance</label>
               </li>
               <li>
              <input type = "radio" name = "genre" value = "thriller"><label for "thriller" class = genrelabel>Thriller</label>
               </li>
               <li>
              <input type = "radio" name = "genre" value = "comedy"><label for = "comedy" class = genrelabel>Comedy</label>
               </li>
              </ul>
            </div>
            
            <div>
              <p id = "likesHeading"> Select The Characters You Like: </p>
              <div id = "checks">
              <input type = "checkbox" id = "Char1" name = "Char1" value = "Michael-Scott">
              <label for = "Char1">Michael Scott</label>
              <br>
              <input type = "checkbox" id = "Char2" name = "Char2" value = "Walter-White">
              <label for = "Char2">Walter White</label>
              <br>
              <input type = "checkbox" id = "Char3" name = "Char3" value = "Eren-Yeager">
              <label for = "Char3">Eren Yeager</label>
              <br>
              <input type = "checkbox" id = "Char4" name = "Char4" value = "Rick-Grimes">
              <label for = "Char4">Rick Grimes</label>
              </div>
              
              
            </div>
            
            <div id = "comments">
              <br>
              <p> Enter Additional Comments Below</p>
              <textarea id = "Additional-Comments" name = "Additional-Comments" placeholder ="Enter Additional Comments"></textarea>
              
              
            </div>
          <br>
            <input type = "submit" id = "submit" name = "submit" >
          </br>
          
    </form>
    
  </section>
  
  
  
</body>