Open In App

Foundation CSS Visibility Classes Hide by Screen Size

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

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
Previous
Next
Share your thoughts in the comments
Similar Reads