Foundation CSS Visibility Classes Orientation Detection

Last Updated : 08 Mar, 2022

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.

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 Orientation Detection can be used to determine whether an element is visible in different orientations, which will change on mobile devices & on desktop, the orientation changes to the landscape.

Foundation CSS Visibility Classes Orientation Detection Class:

show-for-landscape: This class is used to display content in landscape mode.
show-for-portrait: This class is used to display content in portrait mode.

Syntax:

<div class="show-for-landscape"> Content </div>
<div class="show-for-portrait"> Content </div>

Example: This example describes the Visibility Class Orientation in Foundation CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Foundation CSS Visibility Classes 
    </title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css"> 
    <style> 
        img { 
            height: 80px; 
            width: 80px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        Foundation CSS Visibility Classes Orientation Detection 
    </h3> 
    <div class="show-for-landscape"> 
        <center> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png"> 
            <h1>This image is shown on LandScape Mode</h1>  
        </center> 
    </div> 
    <br> 
    <div class="show-for-portrait"> 
        <center> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190531152042/node1.png"> 
            <h1>This image is shown on Portrait Mode.</h1>  
        </center> 
    </div> 
</body> 
</html>

Output:

Example 2: In this example, we will toggle the background color based upon the type of orientation in Foundation CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Foundation CSS Visibility Classes </title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css"> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Foundation CSS Visibility Classes Orientation Detection 
        </h3> 
        <div class="show-for-landscape" 
             style="background-color: pink;"> 
            <h1> 
                Pink is the backgroundColor for LandScape Mode 
            </h1>  
        </div> 
        <br> 
        <div class="show-for-portrait" 
             style="background-color: yellow;"> 
            <h1> 
                Yellow is the backgroundColor Portrait Mode. 
            </h1>  
        </div> 
    </center> 
</body> 
</html>