I need to make the labels and input fields wide enough, but I can't.

Question

index.html

<!DOCTYPE HTML>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="style.css">
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 3</title>
</head>
<body>
    <header class="banner">


    <h1>
        THE CODE REVIEW
    </h1>
    </header>

    <div class="container">
    <p class="signup">Signup for our news letter</p>
    <p class="signup-desc">Get the latest news on how your code is doing right in your inbox</p>
    <fieldset>
    <p class="contact_title">Contact Information</p>

    <form action="index.html" method="post" id="options">
        <ul>
          <li><label for="name">Full Name</label></li>
          <li><input type="text" id="name" name="user_name" placeholder="Required"></li>
        </ul>
        <ul>
          <li><label for="mail">Email Address</label></li>
          <li><input type="email" id="mail" name="user_email" placeholder="Required"></li>
        </ul>
        <ul>
          <li><label for="phone">Phone Number</label></li>
          <li><input type="tel" id="phone" name="user_phone"></li>
        </ul>
        <ul>
          <li><label for="street">Street Address</label></li>
          <li><input type="text" id="street" name="user_street"></li>
        </ul>
        <ul>
          <li><label for="city">City</label></li>
          <li><input type="text" id="city" name="user_city"></li>
        </ul>
        <ul>
          <li><label for="state">State</label></li>
          <li><select id="state" name="user_state">
           <option value="" disabled selected>Choose State</option>
            <option value="AL">AL</option>
            <option value="AK">AK</option>
            <option value="AZ">AZ</option>
            <option value="AR">AR</option>
            <option value="CA">CA</option>
            <option value="CO">CO</option>
            <option value="CT">CT</option>
            <option value="DE">DE</option>
            <option value="FL">FL</option>
            <option value="GA">GA</option>
            <option value="HI">HI</option>
            <option value="ID">ID</option>
            <option value="IL">IL</option>
            <option value="IN">IN</option>
            <option value="IA">IA</option>
            <option value="KS">KS</option>
            <option value="KY">KY</option>
            <option value="LA">LA</option>
            <option value="ME">ME</option>
            <option value="MD">MD</option>
            <option value="MA">MA</option>
            <option value="MI">MI</option>
            <option value="MN">MN</option>
            <option value="MS">MS</option>
            <option value="MO">MO</option>
            <option value="MT">MT</option>
            <option value="NE">NE</option>
            <option value="NV">NV</option>
            <option value="NH">NH</option>
            <option value="NJ">NJ</option>
            <option value="NM">NM</option>
            <option value="NY">NY</option>
            <option value="NC">NC</option>
            <option value="ND">ND</option>
            <option value="OH">OH</option>
            <option value="OK">OK</option>
            <option value="OR">OR</option>
            <option value="PA">PA</option>
            <option value="RI">RI</option>
            <option value="SC">SC</option>
            <option value="SD">SD</option>
            <option value="TN">TN</option>
            <option value="TX">TX</option>
            <option value="UT">UT</option>
            <option value="VT">VT</option>
            <option value="VA">VA</option>
            <option value="WA">WA</option>
            <option value="WV">WV</option>
            <option value="WI">WI</option>
            <option value="WY">WY</option>
          </select></li>
        </ul>
        <ul>            
            <li><label for="zip">Zip Code</label></li>
            <li><input type="text" id="zip" name="zip"></li>
        </ul>
        </fieldset>
        <fieldset>
          <p class="news_header"></p>
          <legend class="news_title">Newsletter</legend>
          <p>Select the newsletter you would like to receive</p>

          <input type="checkbox" id="html" value="html_news"
            name="user_interest"><label for="html">HTML News</label><br>
          <input type="checkbox" id="css" value="css_news"
            name="user_interest"><label for="css">CSS News</label><br>
          <input type="checkbox" id="javascript" value="javscript_news"
            name="user_interest"><label for="javascript">JavaScript News</label><br>

          <p>Newsletter Format</p>

          <input type="radio" id="htmlF" value="html_format"
            name="format"><label for="htmlF">HTML News</label><br>
          <input type="radio" id="cssF" value="css_format"
            name="format"><label for="cssF">CSS News</label><br>

          <p>Other topics you'd like to hear about</p>
          <textarea id="other" name="otherinformation"></textarea><br><br>
          </fieldset>
          <button type="submit">Sign Up</button>


      </form>
      </div>
        <footer>Copyright The Code Review</footer>
    </body>
</html>

style.css

.banner {
    text-align: center;
    overflow: hidden;
    background-color: #000;
    color: #FFF;
    font-family: Georgia;
}

.signup {
    text-align: center;
    font-family: Georgia;
    font-weight: bold;
    font-size: 2em;
}

.signup-desc {
    position: relative;
    bottom: 20px;
    text-align: center;
    color: #DCDCDC;
    font-size: 1.25em;
    border-bottom: 8px solid #000;
    padding-bottom: 40px;
}
.contact_title {
    position: relative;
    font-size: 2em;
    font-weight: bold;
    font-family: Georgia;
    bottom: 30px;
}
.news_header {
    bottom: 20px;
    border-top: 5px solid #000;
    padding-top: 40px;
}

.news_title {
    position: relative;
    bottom: 40px;
    padding-top: 40px;
    font-size: 2em;
    font-weight: bold;
    font-family: Georgia;
}

ul input {
    border: none;
    background-color: #d3d3d3;
    border-radius: 10px;
    width: 100%;
    height: 40px;
}
ul {    
    list-style: none;
    position: relative;
    bottom: 30px;
}

form li {
    margin-left: -39.5px;
}

fieldset {
    border: none;
}

#state {
    border: none;
    background-color: #d3d3d3;
    border-radius: 10px;
    width: 100%;
    height: 40px;
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }

input:focus,
textarea:focus {
    border-style: solid;
}

::-webkit-input-placeholder {
   color: #808080;
   text-align: right;
}

:-moz-placeholder {
   color: #808080;
   text-align: right;

}

textarea {
    border:none;
    background-color: #d3d3d3;
    width: 100%;
    height: 150px;
    border-radius: 15px;

}

button {
  padding: 19px 39px 18px 39px;
  color: #FFF;
  background-color: #008080;
  font-size: 18px;
  text-align: center;
  font-family: Georgia;
  font-style: normal;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #008080;
  border-width: 1px 1px 3px;
  margin-bottom: 10px;
}

footer {
    color: #808080;
    padding-top: 20px;
    text-align: center;
    font-style: italic;
}

#zip {
    margin-bottom: 100px;
    width: 50%;
}

@media (min-width: 760px) {

    form li {
        margin-left: 0;
    }

    ul li {
        display: inline-block;
    }

    .container {
    margin: 10% 20% 0 20%;
    }

    /*Took suggestion. Format looks weird with text inputs*/

    label {
        width: 30%;
    }

    input {
        width: 70%;
    }
}

Look at the 2 bottom parts of my media query. Everything else in my project looks fine, but the input labels won't get any wider than they are. The layout looks fine in the mobile layout but not the desktop one.

Note: This is for the third project for the front end web development certificate.

Answer 1 · 2016-11-21T22:34:00Z

November 21, 2016 10:34pm

At first glance, this looks like a specificity issue. Make sure the elements styled in the media query are the same as the global styles so they will over-ride the values. i.e. "input" will not over-ride "ul input".

Answer 2 · 2016-11-28T06:49:08Z

November 28, 2016 6:49am

Try giving the inputs display: inline-block so you have more control over the layout?

Also, you may want to use different rules for different types of inputs.

Welcome to the Treehouse Community

Looking to learn something new?

Adam Butcher

Adam Butcher

I need to make the labels and input fields wide enough, but I can't.

2 Answers

Eric Montzka

Eric Montzka

Iain Simmons

Iain Simmons