Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Owa Aquino
Owa Aquino
19,277 Points
Posted by Owa Aquino
Owa Aquino
19,277 Points

Responsive Forms

Hi mates!

Just want to ask for help on my portfolio Contact page. I got stuck on how to make my form responsive. I tried adding max-width or width, but somehow it wont adjust when I viewed it on a mobile.

Here is my worskspace snapshot.

https://w.trhou.se/i5jw7z9vj3

Can't wait to hear from you.. :D

Cheers!

1 Answer

Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

Hi Owa,

In order to make a webpage responsive it needs to be on a flexible grid. A flexible grid means you don't use px for width, but %. It also means you use em for font size, and % for margins and paddings.

Here is some of your CSS coding for your form:

#contact-contents{  
    width: 940px;
    margin: 0 auto;
    padding: 0 5%;
    overflow: auto;
}

#inputFields > input[type*="text"]{
    width: 350px;
    display: block;
    margin-bottom: 20px;
    background-color: #e9e3e2;
    border-style: none;
    height: 30px;
    padding-left: 10px;
    font-family: "champagne_bold", sans-serif;  
    color: #7b7b7c;
}

Notice that the width in both rules above are in px. You need to change them to be % to make it responsive.

Notice that your height, margin-bottom, and padding-left in the #inputFields > input[type*="text"] rule are px. You will also want to change them to % to make it responsive.

Thanks, Julie

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Thank you for responding Julie!

Though the problem when i convert my width to % instead of px, the textboxes and textareas it doesn't display the looks i wanted for the form. their width becomes too small even though i set it to 100%.

Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

When you use % it tells the browser to use the parent element for reference. For example:

<body>
  <div id="parent">
     <div id="child">Hello</div>
  </div>
</body>

#parent {
  width: 90%;
}

#child {
  width: 100%;
}

In the above coding the child div will be 100% of it's parent's width. Now, the parent div is taking up only 90% of the browser's width. So, the child will only take up 90% of the browser width as well, which is 100% of it's parent's width. You always need to know what the parent's % width is in order to know how much screen space the child will take up.

Here is another example:

<body>
<div id="parent">
   <div id="child">I am the child div</div>
</div>
</body>

#parent {
   50%;
}

#child {
  100%;
}

In this example the parent div is only taking up 50% of the browsers window. The child div is also only taking up 50% of the browsers window, which is also 100% of it's parents width.

You will need to look at all parent elements up the tree too see if any of them are throwing off the size text boxes and textarea elements.

Knowing how to make a website responsive is an entire class all on it's own. In general to make a website responsive do the following:

Convert all font-sizes from px to em.

Convert all widths from px to %.

Convert all padding from px to %.

Convert all margins from px to %.

Make sure all images/media are scalable.

Use @media queries.

Use viewport meta tag.

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Hey Julie!

Sorry it takes me so long to say thanks.. I'm getting it now. Maybe a little more practice.

Again thank you very much.

Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

You're welcome. :)