Open In App

Foundation CSS Visibility Classes Show by Screen Size

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

In this article, we will learn about Visibility Classes Show by Screen Size which basically means components will be rendered on the screen based on screen size.

The Visibility Class facilitates toggling the view ie., showing or hiding the elements, depending on screen size or device orientation. It helps to control the elements to show depending on the browsing environment. The Show by Screen Size controls the element that is to be displayed on the screen based upon the size of the screen from where the user is accessing the webpage.

Foundation CSS Visibility Classes Show by Screen Size:

  • show-for-*: This class is used to render the content, according to the screen size of the device. The star(*) mark can be replaced with different available screen sizes.
  • show-for-*-only: This class is used to fixed the display only to the specific screen size of the device.

Example 1: In this example, we use the show visibility classes to show certain images based on the device on which users view a page. If their browser meets the class’s conditions, the element will be shown. Otherwise, it will be hidden.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Foundation CSS Visibility classes 
        show-by-screen size
    </title>
    <meta name="viewport" content=
        "width = device-width, initial-scale = 1">
      
    <link rel="stylesheet" href=
  
    <style>
        img {
            height: 40px;
            width: 40px;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>
        Foundation CSS Visibility 
        classes show-by-screen size
    </h3>
    <div class="show-for-small-only">
        <img src=
            alt="web-development_img">
        <h3>
            This image is shown only 
            on a small screen.
        </h3>
    </div>
    <br>
    <div class="show-for-medium-up">
        <img src=
            alt="BootstrapTutorial_img">
        <h3>
            This image is shown on 
            medium screens and up.
        </h3>
    </div>
    <br>
    <div class="show-for-medium-only">
        <img src=
            alt="HTML-Tutorials_img">
        <h3>
            This image is shown only 
            on a medium screen.
        </h3>
    </div>
    <br>
    <div class="show-for-large-up">
        <img src=
        alt="node_img">
        <h3>
            This image is shown on 
            large screens and up.
        </h3>
    </div>
    <br>
    <div class="show-for-large-only">
        <img src=
        alt="gfg_img">
        <h3>
            This image is shown only 
            on a large screen.
        </h3>
    </div>
    <br>
    <div class="show-for-xlarge-up">
        <img src=
        alt="img">
        <h3>
            This image is shown on 
            xlarge screens and up.
        </h3>
    </div>
    <br>
    <div class="show-for-xlarge-only">
        <img src=
            alt="CSSTutorial_img">
        <h3>
            This image is shown only 
            on an xlarge screen.
        </h3>
    </div>
    <br>
    <div class="show-for-xxlarge-up">
        <img src=
        alt="jQueryUI_img">
        <h3>
            This image is shown on 
            xxlarge screens and up.
        </h3>
    </div>
</body>
  
</html>


Output: From the below output, the 1st image is not displayed on a small screen because it would be visible only on small devices.

Example 2: This example describes the change in the background color & image, depending on the different screen sizes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Foundation CSS Visibility Classes 
        show by screen-size
    </title>
    <meta name="viewport" content=
        "width = device-width, initial-scale = 1">
    <style>
        img {
            height: 100px;
            width: 100px;
        }
    </style>
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <h1 style="color:green">
        Geeksforgeeks
    </h1>
      
    <h3>
        Foundation CSS Visibility Classes show by screen-size
    </h3>
      
    <div class="show-for-small-only" 
        style="background-color: aquamarine;">
        <img src=
            alt="jQuery_img">
        <h3>
            This image is shown only 
            on a small screen.
        </h3>
    </div>
    <br>
    <div class="show-for-medium-only" 
        style="background-color: gold;">
        <img src=
            alt="HTML_img">
        <h3>
            This image is shown on 
            medium screens only.
        </h3>
    </div>
</body>
  
</html>


Output:

Reference: https://get.foundation/sites/docs/visibility.html#show-by-screen-size



Last Updated : 16 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads