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!
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
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsHaving trouble producing block and inline block html/css form labels & inputs based on breakpoints.
Hi there!
I'm having a bit of trouble here with an html form I've created. I'm styling it mobile first and have a breakpoint set at 760px for some slight changes.
When in mobile I'd like the labels to be on top of each input. When greater than 760px I'd like the labels to be inline with each input.
Unfortunately the closest I can get to having them inline is having the label in the correct spot and the input to the right of it but slightly below the label too instead of having them on the same line.
HTML:
<section id="contact">
<form id="contact-form" action="index.html" method="post">
<fieldset>
<legend>Contact Information</legend>
<div class="contact-item">
<label for="name">Full Name </label>
<input type="text" id="name" name="user_name" placeholder="Required">
</div>
<div class="contact-item">
<label for="email">Email Address </label>
<input type="text" id="email" name="user_email" placeholder="Required">
</div>
<div class="contact-item">
<label for="phone">Phone Number </label>
<input type="text" id="phone" name="user_phone" placeholder="Include 1 + area code">
</div>
<div class="contact-item">
<label for="address">Street Address </label>
<input type="text" id="address" name="user_address">
</div>
<div class="contact-item">
<label for="city">City </label>
<input type="text" id="city" name="user_city">
</div>
<div class="contact-item">
<label for="state">State </label>
<input type="text" id="state" name="user_state">
</div>
<div class="contact-item">
<label for="name">Zip </label>
<input type="text" id="zip" name="user_zip">
</div>
</fieldset>
</form>
</section>
I was under the impression that I could just set the label and input to 50% and float the label left and the input right and that should work.
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsDidn't know how to do that... I think I gave you them now?
4 Answers
Poul Larsen
5,902 PointsI made another one with more color and css to it
Codepen: http://codepen.io/Slitch/pen/MKbEXg
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsMuch appreciated Poul. You've been very helpful!!!
Poul Larsen
5,902 Points<style>
/* code for label and input when screen is mobile */
label {
display: block;
}
input {
display: block;
}
/* code for label and input when screen NOT mobile */
@media screen and (min-width: 760px) {
label {
display: inline;
}
input {
display: inline;
}
}
</style>
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsRight, so that works but I'd like to have the inputs floated to the right so that they all line up with each other. I'd imagine the labels would be floated to left then too? Doing that causes them to jump around quite about and setting each to 50%; width keeps them stacked all the time.
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsHere's a codepen
Poul Larsen
5,902 Points<style>
label {
display: block;
}
input {
display: block;
}
@media screen and (min-width: 760px) {
label {
display: inline-block;
width: 150px;
}
input {
display: inline-block;
width: 200px ;
}
}
</style>
```html
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsThank you, that'll work!
Poul Larsen
5,902 PointsPoul Larsen
5,902 Pointsdon't I deserve a point?