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

JavaScript Treehouse Club - MASH MASH - CSS Changing Stuff in Your Style Sheet

Posted by Patrick Beugger
Patrick Beugger
14,600 Points

Please Help!!! 4th MASH question not appearing correctly when i try to add it.

Ok the video for changing stuff in your style sheet for treehouse club-MASH says to adjust the width where it says 33.33333% if you want to add a 4th question. However,when i try to add the 4th question and change the width to 25% it appears underneath the other 3 questions with tiny input boxes but i want it to appear in line with the other 3 questions.

Heres my code for the CSS 

body {
  font-family: Helvetica, Arial;
  font-size: 27px;
  margin: 0 auto;
  max-width: 960px;
  padding: 40px 10px;
  line-height: 1em;
  background: #000000;
  color: #fff;
  font-weight: 300;
}

.logo{
  width: 100%;
}

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

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

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

.choice-bucket {
  width: 25%;
  float: left;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.choice-bucket input {
    font-size: 18px;
    margin: 10px 4%;
    padding: 11px 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: auto;
}

#answers p span {
  font-weight: bold;
}

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

.hide {
  opacity: 0;
  height: 0;
}

.show {
  opacity: 1;
  height: 100%;
}

And heres my html code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=0.5, minimal-ui">

  <title>Monster MASH</title>
  <link href="normalize.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>
<body>

  <h1 class="logo"><img src="img/alien-29939.svg" width="400" height="400" /></h1>
  <p class="description">Fill in the blanks to find out what monster you will encounter.</p>

<form action="" method="post" id="mash">

  <div id="answers" class="hide">
      <p>You will see a <span id="location"></span> at <span id="pet"> eating</span><span id="profession">who is wearing a<span id="wear"></span> </span>.
  </div>

  <div class="bucket">

    <div class="choice-bucket">
      <h4 class="highlight">What monster will you see??</h4>
        <input name="location[]" type="text">
        <input name="location[]" type="text">
        <input name="location[]" type="text">
        <input name="location[]" type="text">
      </div>

      <div class="choice-bucket">
        <h4 class="highlight">Where will you see the monster?</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">What is the monster eating?</h4>
          <input name="pet[]" type="text">
          <input name="pet[]" type="text">
          <input name="pet[]" type="text">
          <input name="pet[]" type="text">

       <div class="choice-bucket">
        <h4 class="highlight">What is the monster wearing?</h4>
          <input name="wear[]" type="text">
          <input name="wear[]" type="text">
          <input name="wear[]" type="text">
          <input name="wear[]" type="text">


  </div>

  <input type="submit" value="Tell my fortune">

</form>
<script src=""></script>
</body>
</html>

1 Answer

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

The problem is that you didn't close the div for your 3rd question

<div class="choice-bucket">
  <h4 class="highlight">What is the monster eating?</h4>
  <input name="pet[]" type="text">
  <input name="pet[]" type="text">
  <input name="pet[]" type="text">
  <input name="pet[]" type="text">
</div><!-- this closing tag is missing -->

<div class="choice-bucket">
  <h4 class="highlight">What is the monster wearing?</h4>
  <input name="wear[]" type="text">
  <input name="wear[]" type="text">
  <input name="wear[]" type="text">
  <input name="wear[]" type="text">
</div>
Patrick Beugger
Patrick Beugger
14,600 Points

That was the problem!. Thanks for your help.