How to Make a div Visible Only on Mobile Devices

Learn how to make a div visible only on mobile devices using CSS. In web development, it’s common to hide or show specific elements based on the screen size of the device being used. For example, you may want to show certain content or a div only when a user is accessing the website from a mobile device, and hide it when viewed on larger screens like tablets or desktops. This can be achieved using CSS Media Queries.

In this guide, we will walk through the steps to make a div visible only on mobile devices, specifically targeting smaller screen sizes.

Using CSS Media Queries to Show a div on Mobile Only

To display a div only on mobile devices (typically screens with a width of 768px or less), you can use CSS media queries. A media query allows you to apply specific CSS rules based on conditions like screen width, height, orientation, etc.

Steps to Make a div Visible Only on Mobile:

1. Define the CSS: First, you’ll need to set the div to be hidden by default and then use a media query to display it only on smaller screens (mobile).
2. Target Mobile Screen Sizes: You’ll use a media query with a max-width property to target screens that are 768px wide or smaller, which is a common width for mobile devices.

Example: Make a div Visible Only on Mobile

Here’s a simple example where we will make a div visible only on mobile devices:

HTML:

<div class="mobile-only">
  This content is visible only on mobile devices!
</div>

CSS:

/* Hide the div by default */
.mobile-only {
  display: none;
}

/* Show the div only on mobile devices (max-width: 768px) */
@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }
}

Explanation:

1. Hide the div by Default:
   • The .mobile-only class has a display: none; rule, which hides the div on all screen sizes by default.
2. Media Query for Mobile Devices:
   • The @media (max-width: 768px) rule applies CSS styles only when the screen width is 768px or smaller (common for mobile devices).
   • Inside this media query, we change the display property of the .mobile-only class to block, making the div visible.

Adjusting for Other Screen Sizes (Optional)

You can adjust the max-width value if you want to target different screen sizes. For example:

• Tablets: If you want to target tablets, you might use a max-width of 1024px.
• Larger Screens: For screens larger than mobile but smaller than desktop, you might target min-width: 768px to max-width: 1024px.

Example for Tablet and Desktop Screens:

/* Default - Hide the div */
.mobile-only {
  display: none;
}

/* Show on Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }
}

/* Show on Tablets (min-width: 769px and max-width: 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .mobile-only {
    display: none;
  }
}

/* Show on Desktop (min-width: 1025px) */
@media (min-width: 1025px) {
  .mobile-only {
    display: none;
  }
}

In this example:

• On mobile devices (max-width 768px), the div is visible.
• On tablets (min-width 769px, max-width 1024px) and desktops (min-width 1025px), the div is hidden.

Testing Responsiveness

It’s important to test your website on various devices and screen sizes to ensure the content behaves as expected. You can use the following tools for testing:

• Browser Developer Tools: In most modern browsers (like Chrome or Firefox), you can open the developer tools (F12 or Ctrl+Shift+I) and toggle the device toolbar (Ctrl+Shift+M) to simulate various screen sizes.
• Online Tools: Websites like BrowserStack allow you to test your website on real mobile devices and browsers.

Conclusion

Using CSS media queries is the most efficient way to control the visibility of elements based on the device’s screen size. By setting the display property to none by default and using a media query with max-width to display the div on smaller screens, you can ensure that certain content is shown only on mobile devices.