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

Gannon Katzenberger
Gannon Katzenberger
1,448 Points
Posted by Gannon Katzenberger
Gannon Katzenberger
1,448 Points

When I preview my website for MASH it does not allow me to punch in anything in the first question boxes??????

I deleted all of my code and opened new MASH workspace and the only thing I did to the code was linking the stylesheets why does it not allow me to type in the first boxes?

Gannon Katzenberger
Gannon Katzenberger
1,448 Points
Gannon Katzenberger
Gannon Katzenberger
1,448 Points

<!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>Futuristic MASH</title> <link href="normalize.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body>

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

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

<div id="answers" class="hide"> <p>Your home is in <span id="location"></span> with a <span id="pet"></span> as you are a <span id="profession"></span> who owns a <span id="home"></span>. </div>

<div class="bucket">

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

  <div class="choice-bucket">
    <h4 class="highlight">Your future profession?</h4>
      <input name="profession[]">
      <input name="profession[]">
      <input name="profession[]">
      <input name="profession[]">
  </div>

 <div class="choice-bucket">
    <h4 class="highlight">What's your future pet?</h4>
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
  </div>

</div>

<input type="submit" value="Tell my fortune"> </form> <script src=""></script> </body> </html>

Gannon Katzenberger
Gannon Katzenberger
1,448 Points
Gannon Katzenberger
Gannon Katzenberger
1,448 Points

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

.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; }

.choice-bucket input { font-size: 18px; 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; }

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

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

Gannon Katzenberger
Gannon Katzenberger
1,448 Points
Gannon Katzenberger
Gannon Katzenberger
1,448 Points

also even when i tab over and fill out all of the questions and click tell my fortune it just redirects me to the same screen your already on but erases all question info without giving fortune

2 Answers

Bartosz Rokosz
PLUS
Bartosz Rokosz
Courses Plus Student 1,838 Points
Bartosz Rokosz
Bartosz Rokosz
Courses Plus Student 1,838 Points

Problem disappears after you execute script for the first time. Refresh the page and go to developer tools. Basically the issue is that there is an object (box which shows the script output) which overlaps the input boxes. After you run the script it returns the result which is being displayed and shifts input boxes down allowing you to input data. Hope it makes sense. I think that few blank lines would solve the issue.

Gannon Katzenberger
Gannon Katzenberger
1,448 Points
Gannon Katzenberger
Gannon Katzenberger
1,448 Points

i dont understand im sorry im really new to html and css. I tried adjusting my margins in css for the line .description and it didnt change anything. I tried hitting enter and creating a few blank lines in both my index.html (body section) and in my ..css (.description section) but it did not fix my problem.