CODEWITHSUNDEEP
htmlcss
Jay
Jay

Reputation: 35

Header and footer being pushed left at 375 & 320 mobile view, but fine in all else?

So my footer and header (header is ONLY an image btw) are being pushed left once i go to 375 or 320 mobile view. But on all else it's totally fine, 425px view included. I have tried removing the form margin/padding and fieldset margin/padding, that made no difference. I have tried using background cover/fill for the header image, that did nothing either.

Everything else on the page is right where it should be, only the header and footer are being pushed left at those views.

This is my code

body {
  font-family: 'Nunito', sans-serif;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden; 
}

* {
  box-sizing: border-box;
}

/* Header css */
header {
  display: flex;
  text-align: center;
}

#header_img {
  width: 100%;
  max-height: 150px;
}

/* Form css */
form {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

/* Fieldset and Legend*/

fieldset {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  padding: 1em;
  margin: 1em 0;
  border: solid 1px #ccc;
  border-radius: 6px;
  min-width: 200px;
}

legend {
  padding: 0 .25em;
  font-size: 1.25em;
  color: rgb(34, 34, 34);
}

/* Labels */
label {
  display: block;
  margin-top: .5em;
}

label:first-of-type {
  margin-top: 0;
}

/* Inputs and textarea */
input {
  width: 15em;
  padding: .5em;
  border: solid 1px #999;
  font-size: 12px;
}

#first_name, #last_name {
  font-weight: bold;
  font-size: 14px;
}

#email {
  font-style: italic;
}

textarea {
  min-height: 8em;
  min-width: 100%;
  padding: .5em;
  border: solid 1px #999;
}

input[type="checkbox"] {
  width: 1em;
}

input[type="submit"] {
  padding: .5em 1em;
  margin-top: 1em;
  border-radius: 6px;
  background-color: #333;
  color: #fff;
  font-size: .8em;
  width: 7em;
}

input, textarea {
  border-radius: 2px;
}

#terms_and_conditions_div {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

/* Footer css*/

footer {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;       
  text-align: center;
  font: 18px bold;
}


/* Large screen rules */


@media screen and (min-width: 430px) {
  legend {
     font-size: 1.75em;
  }

  fieldset {
    padding: 1em 2em;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./main.css">
    <title>Event</title>
</head>
<body>
    <header>
      <img id="header_img" src="./Code_challenge_img.png" alt="Event location image">
    </header>

    <form id="contact_form" name="contact_form" method="POST">
      <fieldset>
        <legend>Contact Details</legend>

        <label for="first_name">First name:</label>
        <input type="text" id="first_name" name="first_name" placeholder="First name" maxlength="30">

        <label for="last_name">Last name:</label>
        <input type="text" id="last_name" name="last_name" placeholder="Last name" maxlength="30">

        <label for="phone">Phone:</label>
        <input type="tel" id="phone" name="phone" placeholder="Phone number" maxlength="30">

        <label for="email">Email:</label>
        <input type="email" name="email" id="email" placeholder="Email" maxlength="50">

        <label for="promo_code">Promo Code:</label>
        <input type="text" name="promo_code" id="promo_code" placeholder="Promo code" maxlength="7">

        <label for="how_did_you_hear_menu">How did you hear:</label>
        <select name="how_did_you_hear_menu" id="how_did_you_hear_menu">
          <option value="Social Media">Social Media</option>
          <option value="From a friend">From a friend</option>
          <option value="Email">Email</option>
          <option value="Other">Other</option>
        </select>

        <label for="how_did_you_hear_other">Please specify:</label>
        <textarea name="how_did_you_hear_other" id="how_did_you_hear_other" rows="4" cols="50" placeholder="Please specify" maxlength="255"></textarea>

        <div id="terms_and_conditons_div">
          <input type="checkbox" name="terms_and_conditions" id="terms_and_conditions">
          <a href="terms_and_conditions">I agree to the terms and conditions of this event.</a>
        </div>

        <input type="submit" id="form_submit_btn" value="Submit">
      </fieldset>
    </form>


    <footer>
      <p id="footer_text">For assistance please call 555-5555 or email [email protected].</p>
    </footer>
</body>
</html>
Thanks for any help everyone!

Upvotes: 1

Views: 72

Answers (2)

user16308564
user16308564

Reputation:

Just wrap the elements you want do be in the center in a <div>, and style them to be position: relative; left: 50%;, so this will allow them to be 50% which is in the center, depending on the device.

EDIT: I have done some research and 50% positioning does not center the element, instead use position: relative; left: 50%; just like last, but them use margin-left: -30%;. And this will definetely center the element.

Upvotes: 1

bron
bron

Reputation: 1548

It is not the header or footer. The problem here is the textarea, it is more then 100% width. Change in the html and css the textarea code as shown below to have a correct header/form/footer.

body {
  font-family: 'Nunito', sans-serif;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden; 
}
  
* {
  box-sizing: border-box;
}

/* Header css */
header {
  display: flex;
  text-align: center;
}

#header_img {
  width: 100%;
  max-height: 150px;
}

/* Form css */

form {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

/* Fieldset and Legend*/

fieldset {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  padding: 1em;
  margin: 1em 0;
  border: solid 1px #ccc;
  border-radius: 6px;
  min-width: 200px;
}

legend {
  padding: 0 .25em;
  font-size: 1.25em;
  color: rgb(34, 34, 34);
}

/* Labels */
label {
  display: block;
  margin-top: .5em;
}

label:first-of-type {
  margin-top: 0;
}

/* Inputs and textarea */
input {
  width: 15em;
  padding: .5em;
  border: solid 1px #999;
  font-size: 12px;
}

#first_name, #last_name {
  font-weight: bold;
  font-size: 14px;
}

#email {
  font-style: italic;
}

textarea {
  min-height: 8em;
  width: 100%;
  padding: .5em;
  border: solid 1px #999;
}

input[type="checkbox"] {
  width: 1em;
}

input[type="submit"] {
  padding: .5em 1em;
  margin-top: 1em;
  border-radius: 6px;
  background-color: #333;
  color: #fff;
  font-size: .8em;
  width: 7em;
}

input, textarea {
  border-radius: 2px;
}

#terms_and_conditions_div {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

/* Footer css*/

footer {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;       
  text-align: center;
  font: 18px bold;
}

/* Large screen rules */

@media screen and (min-width: 430px) {
  legend {
     font-size: 1.75em;
  }

  fieldset {
    padding: 1em 2em;
  }
}
<header>
  <img id="header_img" src="https://placeimg.com/1000/150/animals" alt="Event location image">
</header>

<form id="contact_form" name="contact_form" method="POST">
  <fieldset>
    <legend>Contact Details</legend>
    <label for="first_name">First name:</label>
    <input type="text" id="first_name" name="first_name" placeholder="First name" maxlength="30">
    <label for="last_name">Last name:</label>
    <input type="text" id="last_name" name="last_name" placeholder="Last name" maxlength="30">
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone" placeholder="Phone number" maxlength="30">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" placeholder="Email" maxlength="50">
    <label for="promo_code">Promo Code:</label>
    <input type="text" name="promo_code" id="promo_code" placeholder="Promo code" maxlength="7">
    <label for="how_did_you_hear_menu">How did you hear:</label>
    <select name="how_did_you_hear_menu" id="how_did_you_hear_menu">
      <option value="Social Media">Social Media</option>
      <option value="From a friend">From a friend</option>
      <option value="Email">Email</option>
      <option value="Other">Other</option>
    </select>

    <label for="how_did_you_hear_other">Please specify:</label>
    <textarea name="how_did_you_hear_other" id="how_did_you_hear_other" rows="4" placeholder="Please specify" maxlength="255"></textarea>

    <div id="terms_and_conditons_div">
      <input type="checkbox" name="terms_and_conditions" id="terms_and_conditions">
      <a href="terms_and_conditions">I agree to the terms and conditions of this event.</a>
    </div>
    <input type="submit" id="form_submit_btn" value="Submit">
  </fieldset>
</form>

<footer>
  <p id="footer_text">For assistance please call 555-5555 or email [email protected].</p>
</footer>

Upvotes: 1

Related Questions