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
Gregory Myers
21,988 PointsHide-for-large Not Working?
In Framework Basics, when working on the Nesting Grids, Column Ordering and Thumbnails unit I followed all instructions exactly and the hide-for-large rule would not work. I consulted http://foundation.zurb.com/docs/components/visibility.html and found that if I used hide-for-large-up and hide-for-large-only that it would work as it did in the video, but I could not find any current documentation on hide-for-large. Perhaps Foundation's classes have been updated since this course video was created? Hope this helps! -Greg
3 Answers
Philip Enchin
Full Stack JavaScript Techdegree Student 24,726 PointsThis course is built around Foundation 4. The current version as of this writing is Foundation 5, with Foundation 6 on the horizon. Differences between Foundation 4 (used in this video) and Foundation 5 (used in real life, so to speak) are at the end of this answer.
The foundation.css file (included in the project files in this video) supports hide-for-large just fine, but there are other hide-for-... classes you can use that might be of interest:
hide-for-small - Hides when width < 768px
hide-for-medium - Hides when 768px ≤ width < 1280px
hide-for-large - Hides when 1280px ≤ width < 1440px
hide-for-xlarge - Hides when 1440px ≤ width
You can also add -up or -down on the end of the medium and large versions, which do exactly what you'd expect. For example, hide-for-medium-up hides when width ≥ 768px, and so encompasses large and extra large sizes.
Foundation 5 includes an additional screen size (xxlarge) and the breakpoints are defined at 640px, 1024px, 1440px and 1920px (as opposed to Foundation 4's 768px, 1280px and 1440px). For more details, check out Foundation's documentation. For older versions, check out the section titled OLDER DOCS at the bottom of the contents panel on the left.
Links:
David Thomas
Courses Plus Student 21,263 PointsYou are right, I think foundation removed the class "hide-for-large" in favor of hide-for-large-up and hide-for-large-only so that they could create a better mobile first experience when developing.
always good to consult back to the documentation.
Stephan L
17,821 PointsOne more update, as I just came across this issue. From reading the documentation, looks like Foundation 6 has done away with the "hide-for-small" class. Instead, to hide an element on small screens, you would just use "hide" or "hide-for-small-only". "Hide-for-small-only" is probably best for hiding on small elements, because without "hide-for-medium-only", "hide" will hide the element on all viewport sizes.