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

HTML

Posted by John Levy
John Levy
1,451 Points

I am having trouble making part of the code not show up for larger screen sizes

I am having trouble having this code not show up on the larger screens . I know to not display it I should use display: none; but I dont know what to target on the html as the code I want to hide on larger screens is only HTML. It should only be available on screen sizes 600px and below. What do I need to edit in my CSS for this to work? I have attached the HTML code used below- Thanks in advance

<form action="">

<input type="text" placeholder="Name" name="name" required>

<input type="email" placeholder="Email" name="email" required>

<textarea placeholder="Message" name="message" required></textarea>

<input type="submit" value="Send">

</form>

Jacques Wessels
Jacques Wessels
22,557 Points

Hi there,

You can target HTML elements with your CSS as well, so if you want your form to not display above 600px, you can do the following:

@media (min-width:601px) {
  form {display:none;}
}

But this is not really a good way of doing things. What if, for example, you have multiple forms on your page, and you want only that one to be hidden? Or if you're using the same stylesheet across multiple pages, and don't want the forms on the other pages to disappear?

To get around that, you could try adding a class to your form, or wrapping your entire form in a div, and then targeting the class on that div in your media query.

<div class="hide-me">
  <form>
    <input type="text" />
  </form>
</div>

<style>
  @media (min-width:601px) {
    .hide-me {display:none;}
  }
</style>

2 Answers

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points
Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

It should be:

@media screen and (max-width: 600px) {
  form {
    display: none;
  }
}
John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your responses. I managed to hide it from the desktop version by putting it into a div. The problem now is the CSS does not work on my mobile version. What do I need to edit on my CSS to make it show up? Below is the new HTML and the CSS. What should I add to the CSS below to make the new HTML show up? I have attached my code below. Thanks in advance

HTML- <div class= "mobileform"> <form action="">

<input type="text" placeholder="Name" name="name" required>

<input type="email" placeholder="Email" name="email" required>

<textarea placeholder="Message" name="message" required></textarea>

<input type="submit" value="Send">

</form> </div>

CSS-

  • { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -o-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility; }

// Colours $green: #84AD47; $red: #AD4747; $blue: #4784AD;

form { width: 50%; margin: 10% auto; min-width: 9rem; }

input, textarea { float: right; width: 80%; max-width: 80%; border: none; margin: 0.5rem 0; padding: 0.5rem 1rem; border-radius: 0.3rem; background: darken(#f9f9f9, 10%); color: darken(#f9f9f9, 50%);

&[type=submit] { background: $green; color: #fff; width: auto; float: right; }

&::placeholder { color: darken(#f9f9f9, 50%); }

&.error { background: $red; color: #fff; &::placeholder { color: darken($red, 60%); } } } textarea { height: 10rem; } .captcha { float:left; input { float: right; } input[name=question] { width: 4rem; border-top-right-radius: 0; border-bottom-right-radius: 0; text-align: right; padding-right: 0; } [name=captcha] { width: 5rem; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 0.5rem; &::placeholder { text-align: center; } } }

// Generic Styles ;)

  • { box-sizing: border-box; }