Hiding Elements on Mobile Screens Using jQuery and CSS

In modern web design, responsive design is crucial to ensure a seamless user experience across different devices. One of the common requirements in responsive web development is hiding specific elements on mobile screens to improve usability, declutter the UI, and optimize the user experience.

In this guide, we will go step by step through various methods to hide elements on mobile screens, including CSS, JavaScript, and jQuery techniques. We will cover both basic and advanced approaches, ensuring compatibility across different devices and browsers.

---

Table of Contents

1. Understanding Mobile Screens and Breakpoints
2. Hiding Elements Using CSS Media Queries
3. Using jQuery to Hide Elements Dynamically
4. Detecting Screen Width Using JavaScript
5. Combining CSS and jQuery for Dynamic Element Hiding
6. Using jQuery Event Listeners to Hide Elements on Interaction
7. Implementing Click-to-Toggle for Hidden Elements
8. Testing Across Different Devices
9. Best Practices for Hiding Elements on Mobile
10. Conclusion

---

1. Understanding Mobile Screens and Breakpoints

Before hiding elements, it’s important to understand responsive breakpoints. These breakpoints define at what screen width a certain style should be applied.

Common Breakpoints for Responsive Design

• Extra Small (Phones): 0px - 576px
• Small (Tablets): 576px - 768px
• Medium (Laptops/Tablets in Landscape Mode): 768px - 992px
• Large (Desktops & Monitors): 992px - 1200px
• Extra Large (Large Monitors & TVs): 1200px+

We use these breakpoints to target specific screen sizes and hide elements accordingly.

---

2. Hiding Elements Using CSS Media Queries

The simplest way to hide elements on mobile screens is by using CSS media queries.

Example 1: Hiding an Element on Screens Smaller than 768px

@media screen and (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}

Explanation:

• The .hide-on-mobile class hides the element when the screen width is 768px or smaller.
• !important ensures it overrides other conflicting styles.

Example 2: Hiding Multiple Elements

@media screen and (max-width: 768px) {
    .mobile-hidden, .tablet-hidden {
        display: none;
    }
}

• This hides elements with class names .mobile-hidden and .tablet-hidden.

Advantages of CSS Approach:

✔️ Simple and easy to implement
✔️ No JavaScript required (faster performance)
✔️ Works across all modern browsers

---

3. Using jQuery to Hide Elements Dynamically

Sometimes, you may want to hide elements dynamically based on screen size using jQuery.

Example: Hide Element on Page Load if Screen Width is Less Than 768px

<div class="dynamic-hide">This text will disappear on mobile.</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    if ($(window).width() < 768) {
        $(".dynamic-hide").hide();
    }
});
</script>

Explanation:

• This script checks the screen width and hides the element if it is less than 768px.
• This works only on page load.

Advantages of jQuery Approach:

✔️ Can be used dynamically based on conditions
✔️ Works for elements added via AJAX or dynamically loaded content

---

4. Detecting Screen Width Using JavaScript

If you don’t want to use jQuery, you can use vanilla JavaScript.

Example: Hide Elements on Mobile Using JavaScript

<div id="hideOnMobile">This content will be hidden on mobile.</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    if (window.innerWidth < 768) {
        document.getElementById("hideOnMobile").style.display = "none";
    }
});
</script>

Explanation:

• This script hides the #hideOnMobile div if the screen width is less than 768px.
• It uses plain JavaScript, making it lightweight.

---

5. Combining CSS and jQuery for Dynamic Element Hiding

You can combine CSS and jQuery for more flexibility.

Example: Hide an Element on Mobile and Show on Desktop

<div class="mobile-hidden">This text is hidden on mobile.</div>

<style>
@media screen and (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }
}
</style>

<script>
$(document).ready(function() {
    $(window).resize(function() {
        if ($(window).width() < 768) {
            $(".mobile-hidden").hide();
        } else {
            $(".mobile-hidden").show();
        }
    });
});
</script>

Explanation:

• The CSS hides the element initially on mobile.
• The jQuery script listens for window resize and hides or shows the element dynamically.

---

6. Using jQuery Event Listeners to Hide Elements on Interaction

Sometimes, you might want to hide elements based on user interaction.

Example: Hide on Button Click

<div class="hideable">Click the button to hide me.</div>
<button id="hideButton">Hide</button>

<script>
$(document).ready(function() {
    $("#hideButton").click(function() {
        $(".hideable").hide();
    });
});
</script>

✔️ This is useful for menus, alerts, and notifications.

---

7. Implementing Click-to-Toggle for Hidden Elements

Instead of permanently hiding, you can toggle elements.

Example: Show/Hide Menu on Mobile

<button id="toggleMenu">Menu</button>
<div id="mobileMenu" style="display: none;">This is the menu</div>

<script>
$(document).ready(function() {
    $("#toggleMenu").click(function() {
        $("#mobileMenu").toggle();
    });
});
</script>

✔️ This technique is commonly used for mobile navigation menus.

---

8. Testing Across Different Devices

After implementing hiding logic, you should test on real devices.

Ways to Test Responsiveness

1. Chrome DevTools:
   • Press F12 → Toggle “Device Toolbar” → Select a mobile device.
2. Online Tools:
   • Use services like BrowserStack, Responsinator, or LambdaTest.
3. Physical Devices:
   • Test on real phones and tablets.

---

9. Best Practices for Hiding Elements on Mobile

✅ Use CSS media queries whenever possible for better performance.
✅ Avoid using display: none for important content that should remain accessible.
✅ Use jQuery or JavaScript only when necessary (for dynamic changes).
✅ Optimize for touch-friendly interactions when toggling elements.
✅ Test across multiple devices to ensure a smooth experience.

---

Hiding elements on mobile screens is an essential technique in responsive web design. Using CSS, jQuery, and JavaScript, you can implement various methods to hide or show elements dynamically.

Recap of What We Covered

✔️ CSS Media Queries for simple hiding
✔️ jQuery for dynamic hiding
✔️ JavaScript for performance optimization
✔️ Event Listeners for interaction-based hiding
✔️ Best practices for smooth user experience

By implementing these techniques, you can ensure a clean, optimized, and mobile-friendly user interface.