Article Categories

Selected Reading

How to Hide an HTML Element in Mobile View using jQuery?

HTML jQuery Web Development Front End Technology

Nowadays, creating websites that provide a seamless experience across different devices is very important. Responsive web design plays a pivotal role in ensuring that our websites adapt to various screen sizes and orientations. One common requirement in responsive design is the ability to hide certain HTML elements specifically in mobile views. This is where jQuery steps in.

In this article, we will explore how to hide an HTML element in mobile view using jQuery. We will learn how to detect viewport width using jQuery, and leverage this information to conditionally hide elements based on the device's screen size.

By the end of this tutorial, you will be able to understand how to use these techniques to effectively hide HTML elements in mobile views, enhancing the mobile-friendliness of your website.

Syntax

Following is the basic syntax for detecting viewport width and hiding elements using jQuery

$(window).width(); // Returns viewport width in pixels
$('selector').hide(); // Hides the selected element

To conditionally hide elements based on screen size

if ($(window).width() 

Using jQuery to Detect Viewport Width

jQuery is a powerful JavaScript library that simplifies DOM manipulation and provides a wide range of functionalities. In our case, we can leverage jQuery to detect the viewport width and use that information to conditionally hide HTML elements in mobile view.

Retrieving the Viewport Width

After incorporating jQuery in your project, you can utilize the $(window).width() method to retrieve the current viewport width. This method is used to return the width of the viewport in pixels.

Example

Here's an example of how to use the $(window).width() method 

<!DOCTYPE html>
<html>
<head>
   <title>Hide HTML Element in Mobile View using jQuery</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <div class="element-to-hide" style="display: block; width: 200px; height: 200px; background-color: lightblue; text-align: center; line-height: 200px; font-size: 18px; margin: 20px auto;">
      This element hides in mobile view (width < 768px)
   </div>
   <p id="viewport-info" style="text-align: center; font-weight: bold;"></p>
   
   <script>
      $(document).ready(function() {
         // Retrieve and display the viewport width
         var viewportWidth = $(window).width();
         $('#viewport-info').text('Current viewport width: ' + viewportWidth + 'px');
         
         // Hide the element in mobile view
         if (viewportWidth < 768) {
            $('.element-to-hide').hide();
         }
         
         // Update on window resize
         $(window).resize(function() {
            var newWidth = $(window).width();
            $('#viewport-info').text('Current viewport width: ' + newWidth + 'px');
            
            if (newWidth < 768) {
               $('.element-to-hide').hide();
            } else {
               $('.element-to-hide').show();
            }
         });
      });
   </script>
</body>
</html>


Let's see what the above code is about. Here, we use the $(document).ready() function to ensure that the code executes after the document has finished loading. Within this function, we call $(window).width() to retrieve the viewport width and assign it to the viewportWidth variable. The viewport width is displayed on the page for demonstration purposes.

By using the $(window).width() method, we can dynamically obtain the viewport width and use it to conditionally hide HTML elements in mobile view.

Using the hide() Method

jQuery provides an easy-to-use method called hide() that allows us to hide HTML elements. By applying this method to the targeted element, we can easily manipulate its visibility.

To hide an HTML element using jQuery, we select the element using a jQuery selector and call the hide() method on it. This method will set the display property of the element to none, effectively hiding it from view.

Example  Basic Hide Implementation

Here is a basic example for you 

<!DOCTYPE html>
<html>
<head>
   <title>Hide HTML Element in Mobile View using jQuery</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <div class="element-to-hide" style="display: block; width: 200px; height: 200px; background-color: lightblue; text-align: center; line-height: 200px; font-size: 18px; margin: 20px auto;">
      This is the element to hide in mobile view.
   </div>
   <p style="text-align: center; color: #666;">Resize your browser to see the effect. Element hides when width < 768px</p>
   
   <script>
      $(document).ready(function() {
         var viewportWidth = $(window).width();
         
         if (viewportWidth < 768) {
            $('.element-to-hide').hide();
         }
      });
   </script>
</body>
</html>


In the above code, we have an HTML <div> element with the class "element-to-hide". Inside the $(document).ready() function, we retrieve the viewport width using $(window).width() and store it in the viewportWidth variable.

We then use an if condition to check if the viewport width is less than 768 pixels. This is a common breakpoint for mobile devices. If the condition is true, we select the element with the class "element-to-hide" using the jQuery selector $('.element-to-hide') and apply the hide() method to hide it.

Example  Dynamic Responsive Hiding

The following example shows a more robust solution that responds to window resizing 

<!DOCTYPE html>
<html>
<head>
   <title>Dynamic Mobile Element Hiding</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <div class="mobile-hide" style="background-color: #ff6b6b; color: white; padding: 15px; text-align: center; margin: 10px 0; border-radius: 5px;">
      Desktop Navigation Menu
   </div>
   <div class="mobile-hide" style="background-color: #4ecdc4; color: white; padding: 15px; text-align: center; margin: 10px 0; border-radius: 5px;">
      Large Banner Advertisement
   </div>
   <div style="background-color: #45b7d1; color: white; padding: 15px; text-align: center; margin: 10px 0; border-radius: 5px;">
      Main Content (Always Visible)
   </div>
   
   <script>
      function toggleMobileElements() {
         var screenWidth = $(window).width();
         
         if (screenWidth < 768) {
            $('.mobile-hide').hide();
         } else {
            $('.mobile-hide').show();
         }
      }
      
      $(document).ready(function() {
         toggleMobileElements();
         
         $(window).resize(function() {
            toggleMobileElements();
         });
      });
   </script>
</body>
</html>


This example creates a reusable function toggleMobileElements() that handles both initial load and window resize events. Multiple elements with the class "mobile-hide" will be hidden on mobile devices and shown on larger screens.

Common Breakpoints

Different breakpoints are used to target various device types. Here are the common breakpoint values

Device Type	Breakpoint (pixels)	jQuery Condition
Mobile Portrait		`$(window).width()`
Mobile Landscape		`$(window).width()`
Tablet		`$(window).width()`
Desktop	? 1024px	`$(window).width() >= 1024`

Testing and Debugging

To validate the functionality of hiding an HTML element in mobile view using jQuery, it's crucial to test the solution on different devices and viewports. This ensures that the element is properly hidden across a range of mobile devices and screen sizes.

During testing, make sure to simulate mobile viewports using browser developer tools or test the page on actual mobile devices. By doing so, you can verify that the targeted element remains hidden when the viewport width falls within the mobile range.

Debugging Common Issues

While testing, you may encounter certain issues that prevent the expected behavior. Here are a few common problems and resolutions

Element Not Hidden

If the targeted element is not being hidden in mobile view, check the following

Ensure that the class or ID selector used in the jQuery code matches the HTML element you want to hide.
Double-check the viewport width condition to ensure it accurately represents the mobile range you are targeting.
Verify that jQuery library is properly loaded before your custom script.

Element Hidden in All Viewports

If the element is hidden in all viewports, including desktop, review the following:

Verify that the CSS or inline styles of the targeted element do not conflict with the jQuery hide() method. In some cases, existing styles may override the visibility changes made by jQuery.
Check if any other JavaScript code or libraries interfere with the hide() method. Conflicts between different JavaScript libraries can cause unexpected behavior.
Ensure your break

Mrudgandha Kulkarni

Updated on: 2026-03-16T21:38:54+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next

Article Categories

How to Hide an HTML Element in Mobile View using jQuery?

Syntax

Using jQuery to Detect Viewport Width

Retrieving the Viewport Width

Example

Using the hide() Method

Example Basic Hide Implementation

Example Dynamic Responsive Hiding

Common Breakpoints

Testing and Debugging

Debugging Common Issues

Learn More in Our Tutorials

Kickstart Your Career