Foundation CSS Visibility Classes Hide by Screen Size
Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.
In this article, we will learn about the Hide by Screen Size Visibility Classes which renders components on the screen based on screen size. Visibility Classes let us show or hide elements based on screen size or device orientation. You can use visibility classes to control which elements users see depending on their browsing environment.
Hide by Screen Size Visibility Classes
- hide-for-medium: This class hides the element for medium devices
- hide-for-large: This class hides the element for large devices
- hide-for-small-only: This class hides the element for small devices. The element will still be visible on medium and large devices.
- hide-for-medium-only: This class hides the element for medium devices. The element will still be visible on small and large devices.
- hide-for-large-only: This class hides the element for large devices. The element will still be visible on small and large devices.
Note: A .hide-for-small class does not exist because that would permanently hide the element. One can use the plain .hide class for that functionality instead.
Syntax:
<div class="hide-for-*">
// content
</div>
Example 1: In this example, we are toggling image and background based on screen size
HTML
< html >
< head >
< link rel = "stylesheet"
href =
< script src =
</ script >
< script src =
</ script >
< style >
img {
height: 100px;
width: 100px;
}
</ style >
</ head >
< body >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h3 >Foundation CSS Visibility Classes
Hide by Screen Size</ h3 >
< div class = "hide-for-small-only"
style = "background-color: aquamarine;" >
< img src =
< h3 >I am a medium screen.This image
is hidden to small screen.</ h3 >
</ div >
< br >
< div class =
"hide-for-medium-only"
style = "background-color: gold;" >
< img src =
< h3 >I am a small screen.This image
is hidden to medium screens.</ h3 >
</ div >
< br >
</ body >
</ html >
|
Output:
Foundation CSS Visibility Classes Hide by Screen Size
Example 2: In this example, we will simple toggling text between small and large screens
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
< script src =
</ script >
< script src =
</ script >
< style >
img {
height: 100px;
width: 100px;
}
</ style >
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 >Foundation CSS Visibility Classes
Hide by Screen Size</ h3 >
< div class = "hide-for-small-only"
style = "background-color: aquamarine;" >
I am Large Screen
</ div >< br >
< div class = "hide-for-medium-only"
style = "background-color: gold;" >
I am Small Screen
</ div >< br >
</ body >
</ html >
|
Output:
Foundation CSS Visibility Classes Hide by Screen Size
Reference: https://get.foundation/sites/docs/visibility.html
Last Updated :
10 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...