HTML-CSS Element Position / Responsive Design

Very new to HTML & CSS. I have searched far and wide and cannot figure out how to:

  1. Keep the background dark blue box from shrinking when the browser is anything but 1920px wide

  2. Make it so that the entire form moves together like you would expect, text, background, and input fields, like it does on the example provided by FCC.org


FCC template: https://codepen.io/freeCodeCamp/full/VPaoNP

I have tried just about every method or suggestion I could find online just messing around with the code to see what it did, and never got close to what I was looking for.

Here is my code excluding the irrelevant bits in the middle:

<body>
 <div class="container">
   <header class="header">
     <h1 id="title">freeCodeCamp Survey Form</h1>
   <p id="description"><i>Thank you for taking the time to help us improve the platform</i></p>
   </header>
  </div>
   <div>
     <form id="survey-form" class="formBox">
       <div id="name-container">

body {
  font-size: 16px;
  color: white;
  font-weight: 400;
  line-height: 1.4;
  font-family: sans-serif;
  background-image: url("https://www.desktopbackground.org/download/o/2010/11/22/115259_post-your-desktop-wallpapers-computer-science-and-technology_1280x800_h.jpg");
  margin: 0;
  display: block;  
}

.container {
  width: 100%;
  margin: 3.125rem auto 0 auto;
   
}

div {
  display: block;
}

.header {
  padding: 0 0.625rem;
  margin-bottom: 1.875rem;
  
  }

#title {
  text-align: center;
}



h1 {
  font-weight: 400;
  margin-bottom: 1.2rem;
}

p {
  font-size: 1.125rem;
  display: block;

}


#description {
  font-weight: 200;
  text-shadow: 1px 1px 1px rgb(0 0 0 / 40%);
  text-align: center;
}



#survey-form {
  padding: 0.8rem;
  background: rgba(27,27,50,0.95);
  margin: 0 37em;
  border-radius: 10px;
  
}
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */

these are some background properties you can try to use and try different values, maybe you will achieve what you wish. Look them up in w3chool or their docs(just google).
If you want the form to move together, it should be within one element(shared parent), or all its contents must be positioned similarly.
Its hard to give you straight directions as we have no example project ot work with.

Can I give an project example? :wink:
THAT

Thanks for the replies. I will look through and try out the suggestions once I’m done bashing my head into the next project :sweat_smile:

Good luck & happy new year!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.