Conditional display based on screen sizes w3-hide-small, w3-show-large
W3.CSS provides a set of powerful utilities and built-in ready-made classes to conditionally display or hide webpage website elements according to multiple individual screen device sizes in web development scripts. These classes help web developers develop webpage website layout designs that are dynamically modified, and can display or hide webpage content elements based on the web user client’s device gadgets, including small, medium, or large electronic devices (such as mobile, tablet, laptop, or desktop screen devices).
The following classes are used for conditional display in W3.CSS scripts.
- w3-show-small – This W3.CSS class displays webpage element content only on small screen sizes (<600px) pixel resolution size smartphone devices.
- w3-show-medium – This W3.CSS class displays webpage element content only on medium screen devices (600px – 900px) for tablets or notebooks.
- w3-show-large – This W3.CSS class displays webpage element content only on large screen devices (>900px).
- w3-hide-small – This W3.CSS class hides webpage element content on small screen devices.
- w3-hide-medium – This W3.CSS class hides webpage element content on medium screen devices.
- w3-hide-large – This W3.CSS class hides webpage element content on large screen devices.
These W3.CSS classes are especially used when web developers want to develop a fully responsive webpage layout, or make webpage content responsive for multiple individual device gadgets.
Using the w3-show-* and w3-hide-* classes in W3.CSS.
In the example below, we can show or hide certain webpage element content based on the width of multiple different webpage screen sizes.
Example of showing and hiding webpage content based on multiple screen sizes.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Lets Explore Conditional Display Attributes</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-indigo”>
<h2>Lets Display Webpage element on Conditional Screen Size</h2>
<!– Here this content display only on small screens size –>
<div class=”w3-card w3-padding w3-red w3-show-small”>
<p>This webpage content is only display on small screen support width less than 600px smartphone size. </p>
</div>
<!– Here this content display only on medium screens size –>
<div class=”w3-card w3-padding w3-yellow w3-show-medium”>
<p>This webpage content is only display on medium screen support width between 600px and 900px tablet or notebook screen size. </p>
</div>
<!– Here this content display only on large screens –>
<div class=”w3-card w3-padding w3-pink w3-show-large”>
<p>This webpage content is only display on large screen support width greater than 900px desktop or large monitor screen size. </p>
</div>
<!– Here this content hidden only on small screens device –>
<div class=”w3-card w3-padding w3-teal w3-hide-small”>
<p>This webpage content is hidden on small smartphone screen, but it will only display on larger screen devices. </p>
</div>
<!– Here this content hidden only on medium screens device–>
<div class=”w3-card w3-padding w3-orange w3-hide-medium”>
<p>This webpage content is hidden on medium tablet notebook screen, but it will only display on small or large electronic devices. </p>
</div>
<!– Here this content hidden only on large screens device –>
<div class=”w3-card w3-padding w3-white w3-hide-large”>
<p>This webpage content is hidden on large desktop or monitor screen, but it will only display on smaller screen devices. </p>
</div>
</div>
</body>
</html>
Explanation of showing and hiding webpage content based on multiple screen sizes.
- Small screens (w3-show-small) – In this example, the first card displays the card block statement “This webpage content is only displayed on small screens supporting width less than 600px, smartphone size.”
- Medium screens (w3-show-medium) – Similarly, the second card displays the current webpage element only on screens with a width between 600px and 900px, such as a tablet, notebook, or laptop device.
- Large screens (w3-show-large) – The third card displays the webpage element in the current webpage only on device screens larger than 900px, such as a desktop or large monitor screen size.
- Hidden on small screens (w3-hide-small) – The fourth card will hide the content in the current webpage on small screens, but will be displayed on medium and large screen sizes.
- Hidden on medium screens (w3-hide-medium) – The fifth card will be hidden on medium screen sizes, but will display on small and large screen sizes.
- Hidden on large screens (w3-hide-large) – The sixth card content in the current webpage will be hidden on large screens, but will display on small and medium screens.
Using conditional display for responsive navigation in W3.CSS.
Web developers can use the w3-show-* and w3-hide-* classes in W3.CSS web development scripts to create a fully responsive navigation menu header menu bar. Web developers can display a hamburger menu on small screens, smartphones, and sometimes tablet devices, and a regular horizontal navigation bar on large screens.
Example of a responsive navigation bar creation in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Lets create a responsive navigation bar header menu</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<!– here we create a top header navigation bar menu –>
<div class=”w3-bar w3-indigo w3-large”>
<!– here we create a regular menu display only on medium and large screen device –>
<div class=”w3-bar-item w3-hide-small”>Home</div>
<div class=”w3-bar-item” w3-hide-small”>Blog</div>
<div class=”w3-bar-item w3-hide-small”>About Us</div>
<div class=”w3-bar-item w3-hide-small”>Services</div>
<div class=”w3-bar-item w3-hide-small”>Contact Us</div>
<div class=”w3-bar-item w3-hide-small”>Disclaimers</div>
<!– here we create a hamburger menu display only on small screens device –>
<div class=”w3-bar-item w3-hide-medium w3-hide-large”>
<button class=”w3-button w3-large” onclick=”document.getElementById(‘menu’).classList.toggle(‘w3-show’)”>
☰ Menu
</button>
</div>
</div>
<!– here we create a mobile menu for small screens smartphone device –>
<div id=”menu” class=”w3-dropdown-content w3-bar-block w3-dark-grey w3-hide w3-large”>
<a href=”#” class=”w3-bar-item w3-button”>Home</a>
<a href=”#” class=”w3-bar-item w3-button”>Blog</a>
<a href=”#” class=”w3-bar-item w3-button”>About Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Services</a>
<a href=”#” class=”w3-bar-item w3-button”>Contact Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Disclaimers</a>
</div>
</body>
</html>
Explanation of a responsive navigation menu bar in W3.CSS.
- In this example, a hamburger menu (Menu) item will be displayed on small screen devices (<600px) with pixel resolution. Clicking on it will toggle a dropdown (#menu) item on the current webpage.
- On medium and large screen devices (>=600px), the menu elements (Home, Blog, About Us, Services, Contact Us, Disclaimers) will be displayed as a regular horizontal navigation bar menu.
- The w3-hide-medium and w3-hide-large classes are used to hide the hamburger menu item on large screen devices, while the w3-hide-small class hides the normal menu on small screens.
