Selected Reading

Foundation - Show by Screen Size

Quiz

It shows the elements based on the device, by using .show class, on the page, which the user is viewing.
You can display the content for small devices using the show-for-small class, for medium devices, use the show-for-medium class and for large devices, use the show-for-large class.

Example

The following example demonstrates the use of .show 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>Show 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>Show by Screen Size Example</h2>
      <p class = "show-for-small">This line appears on small or medium screen.</p>
      <p class = "show-for-medium">This line appears on medium screen or larger.</p>
      <p class = "show-for-large">This line appears 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 show_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 - Show by Screen Size

Description

Example

Output