Selected Reading

Foundation - Hide by Screen Size

Quiz

It hides the elements based on the device by using .hide class.
You can hide the elements for small devices by using the hide class instead of using .hide-for-small class.
For medium device, you can hide the content by using hide-for-medium class and for large device, use the hide-for-large class.

Example

The following example demonstrates the use of .hide class in Foundation −

<!doctype html>
   <head>
      <meta charset = "utf-8" />
      <meta http-equiv = "x-ua-compatible" content = "ie = edge" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />

      <title>Hide by Screen Size</title>

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>

   </head>

   <body>
      <h2>Hide by Screen Size Example</h2>
      <p class = "hide-for-small">This line disappears on small or medium screen.</p>
      <p class = "hide-for-medium">This line disappears on medium screen or larger.</p>
      <p class = "hide-for-large">This line disappears on large screen or larger.</p>
   </body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code hide_screen.html file.
Open this HTML file in a browser, an output is displayed as shown below.

foundation_visibility_classes.htm

Previous Quiz Next

Foundation - Hide by Screen Size

Description

Example

Output