Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Help with the CSS of HTML forms

I am having a hard time with the CSS of my forms. I got them how I want them to look, but aligning them is difficult.

If you look at the mobile view, thats how I want it to look aside from the inputs and labels not being aligned properly.

Can someone help me with the CSS to align everything so that it is also responsive (so that I won't need media queries)? To further elaborate, how can I have it so that when moving from mobile or desktop, everything just stays centered like how it looks in the mobile view (aside from the other few inconsistencies), rather then some of the items like floating left even though I didn't tell CSS to do that?

Website: http://desimara.com click on the request button on the home page to see the forms.

Here is my current CSS:

form {
  color: white;
  font-size: 1.5rem;
  max-width: 100%;
  text-align: center;
}

legend {
  font-size: 3rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 5px darkred;
}

.number {
  font-size: 4rem;
  text-shadow: 1px 1px 5px black;
  background-color: red;
  border-radius: 50%;
  box-shadow: 1px 1px 8px black;
  padding: 2px 15px;
  margin-right: 10px;
}

label {
  text-shadow: 1px 1px 1px black;
}

.labelP {
  font-size: 1rem;
  text-shadow: none;
  text-align: center;
}

input {
  text-align: center;
}

2 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,240 Points

Hi Lansana,

While it's usually best practice to have media queries, if you really don't want to you can add this rule to your page, and it will center align things:

form button, form input, form select, form textarea {
  display: block;
  margin: auto;
}

Many of those items are inline elements by default, meaning they want to appear in the same line as other elements, so by telling them to be block elements, they will not allow other elements to share the same line and force them to be below them. Then, we add margin: auto; to centre each of them, and voila!

You, sir, are a genius. Thanks a lot!

Why is media query usage better if I get the same outcome without them? I don't care to change my design at the moment, I just want things to be fluid as you change the screen size.

I am trying to learn this small steps at a time and doing all of that at once is a bit over-whelming. Not that media queries are especially hard, but I just prefer it this way.

Simon Merrick
Simon Merrick
18,305 Points

Like percentage units are best for fluid scaling of your element, media queries the best method for adaptive design, allowing you do define a new / altered set of styles under certain conditions. An common example is using a media query to change a webpage from a multicolumn layout (i.e. a webpage with a side bar) to a single column layout when the viewport is too horizontally narrow to practically display multiple columns (i.e. when the page is viewed on an iphone). While, Ryan's solution will improve the aesthetics of your form, media queries can allow you to redefine how it looks at different sizes.

/*Change the background color of the body to red when the page width is less than or equal to 400px*/
@media only screen and (max-width: 400px){
  body {
    background-color: red;
  }
}

the media query above will set the background color of the body element to red, when the width of the viewport is less than 400px (a little bit bigger than the width of a iPhone).

Thank you both!