CODEWITHSUNDEEP
htmlcssinputcontainerscontact-form
Radu B
Radu B

Reputation: 123

Can't get input fields to stay inside the contact form's div

I really got stuck on something that should be simple. I've searched on Google for a fix, but couldn't find any. Most were saying to add {box-sizing: border-box;}, but I already had that.

HTML code:

<div class="row">
  <form  method="post" action="#" class="contact-form clearfix">
    <div class="row">
     <div class="col span-1-of-2">                     
      <input type="text" name="name" id="name" placeholder="Name" required>
     </div>
     <div class="col span-1-of-2">
      <input type="email" name="email" id="email" placeholder="Email" required>
     </div>
    </div>
                          
    <div class="row">
      <textarea name="message" id="message" rows="4" placeholder="Message"></textarea>
    </div>
                          
    <div class="row">
       <input type="submit" name="submit" id="submit" value="SEND MESSAGE">
    </div>                  
  </form>
</div>

CSS code:

/* THE STANDARD STUFF */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body{
    background-color: #fff;
    color: #777;
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.clearfix{zoom:1;}
.clearfix:after{
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.row{
    width: 1170px;
    margin: 0 auto;
}


/* FROM GRID.CSS */

.row:before,
.row:after {
    content:"";
    display:table;
}
.row:after {
    clear:both;
}

.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; }

.span-1-of-2 {
    width: 49.2%;
}

/* THE CONTACT STYLE */

.contact-form{
    width: 80%;
    margin: 0 auto;
}

input[type=text], input[type=email], textarea{
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

textarea{    
    height: 100px;
}

.contact-form #submit{
    border: 0;
    margin-top: 20px;
}

*:focus{
    outline: none;
}

Here's how the form looks like: http://codepen.io/anon/pen/apVzyg

As you can see, the fields are being pushed to the right, instead of staying within the row and the contact form's container, which is set to 80%. For the life of me, I cannot figure out why this is happening. Maybe the mistake is in front of me, but I got tunnel vision by now.

I made this based on the instructor's style and example, which you can check here: http://codepen.io/anon/pen/VPrYqm

It's kind of similar to mine, except I don't use label and I use col 1-of-2.

The grid.css file is downloaded from responsivegridsystem(dot)com.

Upvotes: 2

Views: 1820

Answers (2)

David Neto
David Neto

Reputation: 808

The contact-form parent container belongs to class .row and will get a fixed width of 1170px. Then contact-form is defined to be 80% of that size and margin auto. so margins will be 20% of 1170px, 10% on each side. You can fix it by removing the 1170px restriction. You could have a look at min-width and max-width properties to achieve a more adaptable layout.

Upvotes: 1

Vishwas Singh Chouhan
Vishwas Singh Chouhan

Reputation: 891

The problem is arising because you are setting row width explicitly.

width: 1170px;

Remove this line and you'll get the desired rendering of your HTML.

See this pen: http://codepen.io/vici0us/pen/mRqJXK?editors=1100

Upvotes: 1

Related Questions