Question 44095 in Html Question posted in
Some basic documentation can be found here.

content getting of <div> when reducing screen size – Html

Image of problem

I have 1 main div and inside it one more div. When I try to reduce the size of screen the main div shrinks from the right side but the input section inside the secondary div gets out of the main div.

.footer-main {
  margin-top: 100px;
  width: 100%;
  background-color: #faf7f5;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.45);
}

.left {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  padding-top: 50px;
  margin-left: 8.3%;
  margin-right: 8.3%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  float: none;
  margin-right: 6.25%;
  /* margin: 0; */
}

.btn1 {
  color: #fff;
  background-color: #ec2626;
  height: 61px;
  width: 510px;
  border: 0px;
  border-radius: 15px;
  margin-top: 30px;
}
<div class="footer-main">
  <div class="left">
    <div class="top">Contact Us</div>

    <div class="form__group field">
      <input type="input" class="form__field" placeholder="Name" name="name" id="name" required />
      <label for="name" class="form__label">Name</label>
    </div>

    <div class="form__group field">
      <input type="input" class="form__field" placeholder="E-mail" name="E-mail" id="E-mail" required />
      <label for="E-mail" class="form__label">E-mail</label>
    </div>

    <div class="form__group field">
      <input type="input" class="form__field" placeholder="Message" name="Message" id="Message" required />
      <label for="Message" class="form__label">Message</label>
    </div>

    <button class="btn1" type="button">Submit</button>
  </div>
</div>

I dont know why the div is shrinking from the right.
I am trying to make this section responsive, but the section does not change accourding to the screen size.

Tags:

2

Answers


  1. 0

    Not sure to follow, since copying the code creates a different scenario than the image attached. Some styles seems to be missing.

    However the problem seems to be the fixed width on the button of 510px. When the space of the screen is less than that. The button will still be that width, making also the parent width bigger.

    If you want to make the button to use the whole width, you can set a max-width of 100vw.

    Maybe you can add more details, and we can help you better.

    Login or Signup to reply.
  2. 0

    You need to set the width of your inputs in % units, not px. Pixels will always remain the same size no matter the width of your browser view.

    .footer-main {
  margin-top: 100px;
  width: 100%;
  background-color: #faf7f5;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.45);
}

.left {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  padding-top: 50px;
  margin-left: 8.3%;
  margin-right: 8.3%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  float: none;
  margin-right: 6.25%;
  /* margin: 0; */
}

.btn1 {
  color: #fff;
  background-color: #ec2626;
  height: 61px;
  /* Width set as 100% */
  width: 100%;
  border: 0px;
  border-radius: 15px;
  margin-top: 30px;
}
    <div class="footer-main">
  <div class="left">
    <div class="top">Contact Us</div>

    <div class="form__group field">
      <input type="input" class="form__field" placeholder="Name" name="name" id="name" required />
      <label for="name" class="form__label">Name</label>
    </div>

    <div class="form__group field">
      <input type="input" class="form__field" placeholder="E-mail" name="E-mail" id="E-mail" required />
      <label for="E-mail" class="form__label">E-mail</label>
    </div>

    <div class="form__group field">
      <input type="input" class="form__field" placeholder="Message" name="Message" id="Message" required />
      <label for="Message" class="form__label">Message</label>
    </div>

    <button class="btn1" type="button">Submit</button>
  </div>
</div>

    Another workaround is to use CSS Media Queries to set sizing at specific screen sizes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search