When the screen size decreases, HTML images do not adjust accordingly

Hey there, I'm just diving into the HTML and CSS world with FreeCodeCamp's curriculum. The second project involves creating a survey/form, which I've managed to put together quite nicely--except for one small issue with the images. While they look fine initially, once the window is resized they move off-screen due to my use of absolute positioning. Any tips or critiques are welcome as I work through this challenge! Here's the link to my project: Dylan'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%2B_logo.svg/800px-Disney%2B_logo.svg.png" class = "disney">
  </div>
  <h1 id = "title"> What's Your Favorite Show? </h1>
  <p id = "description"> Help us know by completing the questions below! </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.lt;/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;
}
htmlcss

Answer №1

Avoid utilizing position: absolute as it may cause your content to extend beyond the screen boundaries. It is recommended to use relative units like % or rem and refrain from setting an absolute position.

Answer №2

In this space, feel free to explore the original code that has been slightly modified with a focus on flexbox and media query learning.

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;
  ...
          
 
/* Image stuff here */
.rick{
  width: 300px;
  height: auto;
  position:relative;
  border-radius: .5em;
}
.mystery{
  position:relative;
  width: 300px;
  height: auto;
  border-radius: .5em;
}

@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-...
          Enter Additional Comments Below</label></textarea>
            ...
        </textarea>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How come the spacing between my columns decreases as I expand the width of my container?

I'm struggling to grasp the concept behind the column gap in a multi-column layout. Take a look at the HTML/CSS code snippet I have set up in this Fiddle: <div class="flex-container"> <div class="flex-item">1</div& ...

htmlcssflexboxcss-multicolumn-layout

The issue with the page width is occurring due to a bug related to the

When pages contain the AddThis code, they tend to become very wide due to the code itself, resulting in a horizontal scroll bar appearing. However, by removing the code or changing the page direction to LTR, the issue is resolved and the page width return ...

htmlcssaddthis

Tips for extracting an XML value from an API

I'm attempting to showcase a value retrieved from an API (specifically used by PRTG software to extract information). Here is the link to the API: The API provides an XML file structured like this: <?xml version="1.0" encoding="UTF-8"?> <ch ...

javascripthtmlajaxxml

Tips on changing an image with a button click

I am currently working on a project where I have a div tag containing an image that is selected randomly from different arrays based on topics. However, I am facing some challenges in making the image change when the "go" button is clicked. I want the if ...

javascripthtml

Discovering the following element containing an ID attribute with jQuery

Upon clicking a link, my goal is to locate the subsequent <section> with an ID attribute and retrieve its ID. In the provided code snippet and JavaScript function, the expected outcome upon clicking the link is for "section_3" to be logged in the co ...

javascriptjqueryhtmljquery-selectorssiblings

Adding a click function to a div individually when they share the same class in HTML

My goal is to include 4 unique divs inside a timeline container: This is how I envision the structure: <div id="timeline" > <div class="timeline-bar t-1"></div> <div class="timeline-bar t-2"> ...

javascriptjqueryhtmlcss

Refreshing a PNG file without the need to refresh the entire page

Developed a captcha using imagestring imagestring($image, 5, 5, 30, $text, $text_color); imagepng($image,"captcha_image.png"); imagepng($image,"captcha_image.png"); The code snippet above shows part of the implementation. <img ...

javascriptphphtml

Storing input field values in JavaScript using the onchange event handler.Would you like a different revision

I am looking to calculate the area by multiplying width and height entered into input fields, and then display the result. Any guidance would be greatly appreciated. Thank you! Here is my current code. const width = document.querySelector("#width"); con ...

javascripthtmlcssonchangeinput-field

As the width decreases in animation, the content gradually disappears until it reaches zero

My issue involves red and black divs; when I hover over the parent element, the red div should appear by expanding to its full width. However, a problem arises when the width is set to 0px as the content still shows. Can someone provide assistance on how t ...

jquerycss

Is there a feature on the webpage that allows users to save clicked xy points and display them as text?

Is there a way to incorporate a feature on a website that displays clicked xy points as text, allowing them to be easily copied and pasted? ...

jsonhtmlcanvas

What is the purpose of using double % in Java or JSP?

Yesterday, while reviewing some code, I came across a line that seemed very peculiar to me. In a JavaScript function, there is a condition checking for a string passed as a parameter in the following manner: "%%unsubscribe%%". See the snippet below for re ...

javajavascripthtmljsp

Is there a way to create a customized select handle using CSS?

Is there a way to create a resizable border that appears when a user clicks on the div? And when they move the mouse over it, can the cursor change accordingly? I also want the user to be able to drag the element's border and have the element resize a ...

cssselectionborderresize

What are the steps to retrieve JSON data and display it using an unordered list in an HTML document?

My JSON data structure looks like this: { "fID": "00202020243123", "name": "John Doe", "List": ["Father", "Brother", "Cousin"] } When I render this JSON element in my model and view it in the HTML, everything works fine. However, when I try t ...

javascriptjqueryhtmljsonhtml-lists

Contrast between the structure of asp.net button and hyperlinks

I want to transfer the styles of a hyperlink in regular html to an Asp.net button. However, I encountered a strange background issue that is disrupting the appearance of the buttons. Hyperlink: Asp.net Button How can I remove the outline that appears o ...

asp.nethtmlcssbuttonhyperlink

Pictures acting erratic following the implementation of two setTimeout functions

I encountered an issue while developing a pong game using html/css/javascript. Everything was going smoothly until I introduced a second setTimeout() function. Here is the snippet of my html code: <!DOCTYPE html> <html> <head> <scrip ...

javascripthtmlcss

What are some effective strategies for avoiding empty fields showing on an email form?

My HTML form is linked to a PHP Email handler, and it's working well except for one issue. When the email is delivered, it includes all fields, even the empty ones. I want it to only display filled-in fields. I tried using an IF statement that checks ...

phphtmlformsemailsyntax

Retrieving HTML content using CURL

Could really use some help with my curl issue: I'm using CURL to connect to a page, then redirecting myself to another page that's only accessible when logged in. How can I retrieve the HTML code from this page? I can see the page displayed, but ...

phphtmlcurlscreen-scraping

I want to set a single background image for all slides in fullPage.js. How can I achieve this

I am attempting to replicate a similar effect as shown in this example: The demonstration above utilizes the fullPage.js plugin. You may have noticed how the background image remains consistent while navigating through different sections. I have searched ...

javascriptjqueryhtmlcssfullpage.js

What is the best way to trigger a javascript modal to open automatically after a specific duration

Let's take an instance where my modal has the ID #modal1. It usually appears through a button-based action. ...

javascripthtmltwitter-bootstrapbootstrap-modal

Change element position to relative while scrolling

I created a wrapper with an animation similar to the one on Apple's Airpods Pro page. It features a video that plays gradually as I scroll, with the text smoothly scrolling over it within a specific area (text-display). So far, this part is working w ...

javascriptjqueryhtmlcss