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

Posted by ibbhfsmeaf
ibbhfsmeaf
4,568 Points

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,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 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!

ibbhfsmeaf
ibbhfsmeaf
4,568 Points

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,891 Points
Simon Merrick
Simon Merrick
18,891 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).

ibbhfsmeaf
ibbhfsmeaf
4,568 Points
ibbhfsmeaf
ibbhfsmeaf
4,568 Points

Thank you both!