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

Utilizing HTML and JavaScript to add grayscale effect to images within a table, with the ability to revert to the colored version upon mouseover

Seeking advice on utilizing the mouseover / mouseout event in javascript to implement grayscale on a table. The challenge requires creating a gray image grid (table) using HTML and then incorporating Javascript so that hovering over an image triggers it to ...

javascripthtmlonmouseovergrayscaleonmouseout

Animating the appearance and behavior of radio buttons using CSS transitions and JavaScript

My jQuery code allows me to fetch attributes from the .item element, but I'm having trouble with my CSS transitions not working as intended. To see the desired transition effect, try replacing .item with .item-tile. How can I make my CSS transitions ...

jqueryhtmlcssradio-button

Encountering a syntax error when attempting to generate a div dynamically with jQuery

I am in the process of creating a view application form using Bootstrap after submitting a form. Initially, I created it utilizing two 'div' elements. Now, I am exploring how to dynamically generate a div upon clicking a button: <i> Sectio ...

javascriptjqueryhtmlcssjson

Manage the flow of traffic between a stationary webpage and the Express framework

My Apache web server is configured to proxy node applications in a virtualhost environment. One of my express applications serves a static web page: app.use(express.static('.')) app.set('views', path.join(__dirname, 'views') ...

htmlnode.jsexpress

The issue of stuttering arises in Safari when using a combination of size and translate transitions

When applying transitions to an element and adjusting the width and/or height along with -webkit-transform:translate3d, there is a noticeable stutter in the transition animation. It seems like the width/height change is animated first, then partially trans ...

csssafaritransformcss-transitions

Centering items in Material UI Grid

I'm currently grappling with understanding Material UI's grid system and implementing it in React.js, and I find it a bit perplexing. My goal is to center the spinner loader and text irrespective of viewport size. While I can manage to place the ...

cssreactjsmaterial-uicentering

Import Information into Popup Window

When a user clicks on the "view" button, only the details of the corresponding challenge should be displayed: Currently, clicking on the "view" button loads all the challenges. This is because in my view-one-challenge.component.html, I have coded it as fo ...

htmlangulartwitter-bootstraptypescript

How to transfer a java list to an html template

I have extracted some information from an HTML file that relies on input from a Map structure as demonstrated below Template t = TemplateLoader.load("Printing/account.html"); Map<String, Object> map = new HashMap<String, Object>(); map.put("a ...

javahtmlplayframework

Using a CSS style to modify a class based on another class at the same level in the hierarchy

I am working with a jQuery carousel that is adding an 'active' class to images within a div. Within the same div, there is also a span with a 'fade' class that has a CSS style of opacity: 0. Is there a way to change the CSS style of the ...

javascriptjquerycss

How can I ensure that my style.scss file effectively interacts with my stylesheet by including imports for "variables", "globals", and "header"?

Currently, I am in the process of learning how to utilize Sass and JavaScript through VS Code. Within my project structure, I have an "app" folder where my js folder resides containing script.js, as well as a scss folder holding _globals.scss, _header.scss ...

htmlstylesnav

Is it possible to load MySQL data into an HTML form?

My Inquiry: I'm currently developing a web-based product catalog that includes an edit feature. At present, I have a drop-down menu that displays all the products stored in my SQL database. Is there a way to automatically populate the text-boxes on t ...

phphtmlmysqlmysqli

Tips for extracting content data from a Microdata meta tag within a designated class

I am attempting to extract all the values associated with dateCreated. My current approach involves using Selenium webdriver with Python. <div class="bv-content-datetime" role="presentation"> <meta itemprop="dateCreated" content="2018-08-28" ...

htmlpython-3.xseleniummeta-tagsmicrodata

Modify text by adjusting text color based on the contrast with the background color using knockout databinding

I am working with a table that contains data from my database: Here is the ViewModel structure: function alertViewModel(i) { var self = this; self.Id = ko.observable(i.Id); self.AlertType = ko.observable(i.AlertType); self.Category = ko.observab ...

cssknockout.js

Separate your HTML code and move it to a different HTML document within Angular CLI

Is there a way to extract my HTML section from the file app.compontent.ts and place it in a separate HTML document? I've tried adding the HTML code directly into the generated class app.component.ts but it doesn't seem to work. I'd also lik ...

htmlangular

The PHP on server could not be loaded by Ajax

Trying to establish a PHP connection, encountering an error and seeking assistance. The error message displayed is as follows: { "readyState": 0, "status": 0, "statusText": "NetworkError: Failed to execute 'send' on 'XMLHttpReq ...

javascriptphpjqueryajaxhtml

Using the ng-show directive in AngularJS allows you to pass elements in

Web Development <li ng-show="sample($event)" TestLi</li> JavaScript Functionality $scope.sample = function($event){ //$event is undefined //perform some action } I have experimented with passing the HTML element using ng-click, but I am curio ...

htmlangularjseventselement

Error encountered: iPad3 running on iOS7 has exceeded the localStorage quota, leading to a

Experiencing a puzzling issue that even Google can't seem to solve. I keep getting the QuotaExceededError: DOM Exception 22 on my iPad3 running iOS7.0.4 with Safari 9537.53 (version 7, WebKit 537.51.1). Despite turning off private browsing and trying ...

javascriptioshtmlipadios7

Displaying PHP errors in input fields

I have noticed that this particular code is functioning correctly. However, I am wondering why I receive an error when I remove the foreach loop ($rows as $row). Is there a method to display the data without utilizing it? <?php require("coneccion.php ...

phphtmlcss

What is the best way to modify the colors of two specific elements using a combination of CSS and JavaScript

I am currently developing a browser-based game and have encountered an issue. Here is the relevant line of my HTML/PHP code: echo '<div id="div'.$n.'" class="d'.$rand.'" onclick="swapit(this.id, this.className)"></di ...

javascripthtmlcssbackground-color

An issue arises when attempting to send form information through email using PHP

I'm facing an issue with sending email from a form. Every time I submit the form, I receive an "error occurred" message as specified in my if else statement. This prevents the mail from being sent. Can you help me troubleshoot this problem? Below is t ...

phphtml