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

CSS

Lindsay Harmon
seal-mask
.a{fill-rule:evenodd;}techdegree
Lindsay Harmon
Web Development Techdegree Student 2,842 Points
Posted by Lindsay Harmon
.a{fill-rule:evenodd;}techdegree
Lindsay Harmon
Web Development Techdegree Student 2,842 Points

I am unable to hide the navigation in the footer when viewed at 320px for project 2.

I am trying to get the footer navigation to hide .full when viewed at 320px, and to show .top. I have tried .full {display:none;} but I think there is something in the css that is preventing me from hiding it.

Thanks in advance for any suggestions on how to fix this.

https://github.com/lkateharmon/techdegree_project_2

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

It seems you're trying to target the .full and li.full selectors, but in effect they target the same element, so the effect of this is to override one display property with another. And it looks like the display of inline-block; is the one that is holding.

You mention that you need to hide the full class at breakpoints of 320 or narrower. You can do this with the max-width: 320px media query.

Below line 51, add another media query

styles2.css 
@media (max-width: 320px) {
    .full {
       display: none;
    }
}

This should mean that overrides the inline-block value in the 768px breakpoint.

Lindsay Harmon
seal-mask
.a{fill-rule:evenodd;}techdegree
Lindsay Harmon
Web Development Techdegree Student 2,842 Points
Lindsay Harmon
.a{fill-rule:evenodd;}techdegree
Lindsay Harmon
Web Development Techdegree Student 2,842 Points

Thanks for your comment, it's very helpful. Unfortunately, when I first submitted I had a Media Query as you listed, but they returned the project as Needs Work with this reply:

"With a mobile-first approach, all code for the mobile screen size (320px in this case) needs to be outside of a media query. You will need to delete your @media (min-width: 320px)"

I will keep trying, thanks!

Lee Vaughn
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher
Lee Vaughn
.a{fill-rule:evenodd;}techdegree seal-36
Lee Vaughn
Treehouse Teacher

Hey Lindsay Harmon!

Not sure if you are in the FEWD or Web Dev Techdegree but either way I would encourage you to reach out in Slack for help with this or any other TD-related question. Only a small percentage of folks here in the forums are enrolled in a TD so posting in Slack will ensure that your question goes to those folks best able to help.

If you aren't sure how to access Slack or need an invite feel free to reach out to help@teamtreehouse.com.

Break a leg!