First column of the text boxes does not allow input. I have linked style sheets and js?? How do I fix?

Question

I have even tried to the change the type of input from text to check box and it wont even let me click the check box. However if I click tab a few times it allows me to type text in them. Not sure what i'm doing wrong.

One more question when trying to alter font size of the text in class "highlight" in the h4's even when I use my style.css and add .highlight, or .div, or .h4 and add a font-family and font-size it does not change the size of the font.

Can someone help me I feel like it's something small? i shortened code to link and input i still have doctype meta tags /html and such. same with style.css

<h1 class="logo"><img src="img/Fortune-Teller.jpg" /></h1> <p class="description">Fill in the blanks and your future will be foretold.</p>

<div id="answers" class="hide"> <p>You live in a <span id="location"></span> and hate your shitty wife <span id="pet"></span> you are a <span id="profession"></span> and live in a <span id="home"></span>. </div>

<div class="choice-bucket">
  <h4 class="highlight">What do you want to live in?</h4>
    <input name="location[]" type="checkbox">
    <input name="location[]" type="text">
    <input name="location[]" type="text">
    <input name="location[]" type="text">
  </div>

  <div class="choice-bucket">
    <h4 class="highlight">What kind of person are you?</h4>
      <input name="profession[]" type="text">
      <input name="profession[]" type="text">
      <input name="profession[]" type="text">
      <input name="profession[]" type="text">
  </div>

 <div class="choice-bucket">
    <h4 class="highlight">Who is your future wife?</h4>
      <input name="pet[]" type="text">
      <input name="pet[]" type="text">
      <input name="pet[]" type="text">
      <input name="pet[]" type="text">
  </div>

</div>

body { font-family: Six Caps, Ubuntu-Title; font-size: 27px; margin: 0 auto; max-width: 960px; padding: 40px 10px; line-height: 1.65em; background: #000; color: #ff0000; font-weight: 300; }

.highlight { font-family:sans-serif; font-size: 35px; margin: 0 auto; color: #fff }

.logo{ width: 100%; }

.logo img { margin: 0 auto; display: block; }

.description { margin: 80px auto 40px; text-align: center; }

.bucket { width: 100%; margin-bottom: 40px; display: inline-block; }

.choice-bucket { width: 33.333333%; float: left; display: inline-block; margin: 0; padding: 0; font-size: 35px; }

.choice-bucket input { font-size: 27px; margin: 15px 4%; padding: 16px 0; width: 92%; color: #BB475C; border-radius: 6px; border: 0; outline: 0; text-indent: 20px;

}

.highlight { font-size: 18px; margin-left: 30px; opacity: .8; line-height: 24px; }

answers {

/* opacity: 0; */
margin: 60px 0;
background: #fff;
border-radius: 6px;
color: #BB475C;
transition: 1s linear;

}

answers p {

max-width: 760px; margin: auto; padding: 80px 0; }

answers p span {

font-weight: bold; }

form input[type=submit] { background: #B5D269; border: 0; color: #fff; font-size: 20px; padding: 1em 2em; cursor: pointer; margin: 0 auto 60px; display: block; text-align: center; border-radius: 6px; font-weight: bold;

Answer 1 · 2016-02-11T03:52:43Z

February 11, 2016 3:52am

I wasn't able to replicate the entry issue. I could enter text into the boxes easily. Maybe the code you didn't include has something to do with it.

About the font sizes - did you realize you have multiple CSS blocks with identical selectors? That's not a problem in itself, but if they have the same properties, only the last one will be effective. For example, the font sizes changed as expected when adjusting them in the last .highlight block, but the font size setting in the first .highlight block is always ignored.

Welcome to the Treehouse Community

Looking to learn something new?

Gannon Katzenberger