Hiding elements on mobile and tablet devices using display:none in html/css

Question

Hiding elements on mobile and tablet devices using display:none in html/css

I have a fiddle that is functioning perfectly in desktop view. When clicked, the description box of a product item is displayed at the bottom. See screenshot below:

https://i.sstatic.net/yaZDC.png

However, in mobile view, all description boxes are automatically displayed at the bottom without being clicked on top.

Here are snippets of the CSS code I used for the mobile view:

@media only screen and (max-width: 767px)
{
.product-all-contents
{
   overflow-x: auto;
}

.product-contents .product{
      min-width: 50.795%;
      margin: 0 2%;
      padding-top: 3.91%;
      padding-left: 3.91%;    
      padding-right: 3.91%;
  }
}

Issue:

Currently, all boxes are displayed at the bottom without clicking them.

I suspect that using display: inline-block !important is overriding display:none in the HTML.

@media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label  {
    display: inline-block !important;
}
}

I'm curious about what changes to make in the CSS codes to apply display: inline-block !important only to one product item instead of all items.

javascript jquery html css media-queries

Answer 1

Answer №1

Include the following jQuery code snippet to apply this functionality across all sections:

$(window).resize(function(){
   if ($(window).width() <= 767) {  
          $("#franchisehub").click(function(){
            $(".franchisehubtv").css('display', 'inline-block');
          });
          //ensure this condition is added for every section 
   }       
});

Furthermore, eliminate the specified CSS rule:

@media only screen and (max-width: 767px)
{
.goal-setting, .customization-tools, .custom-invoicing, .lead-tracking, .email-marketing, .royalty-calculator, .brand-control,
.franchisehubtv, .cloudbasedtextipad, .business-analytics, .tech-support, .employee-management, .order-management, .white-label  {
  display: inline-block !important;
}
}

Answer 2

Include the following jQuery code snippet to apply this functionality across all sections:

$(window).resize(function(){
   if ($(window).width() <= 767) {  
          $("#franchisehub").click(function(){
            $(".franchisehubtv").css('display', 'inline-block');
          });
          //ensure this condition is added for every section 
   }       
});

Furthermore, eliminate the specified CSS rule:

@media only screen and (max-width: 767px)
{
.goal-setting, .customization-tools, .custom-invoicing, .lead-tracking, .email-marketing, .royalty-calculator, .brand-control,
.franchisehubtv, .cloudbasedtextipad, .business-analytics, .tech-support, .employee-management, .order-management, .white-label  {
  display: inline-block !important;
}
}

Answer 3

Answer №2

To hide all boxes at the bottom, except for the active one in your click handler, you can simply remove the CSS provided below. I tested your fiddle without this CSS and it still functions correctly on screen widths less than 767px.

@media only screen and (max-width: 767px)
{
   // Your CSS styles here
}

Answer 4

To hide all boxes at the bottom, except for the active one in your click handler, you can simply remove the CSS provided below. I tested your fiddle without this CSS and it still functions correctly on screen widths less than 767px.

@media only screen and (max-width: 767px)
{
   // Your CSS styles here
}

Answer 5

Answer №3

Using !important in your CSS, whether it's external or internal, will take precedence over inline styles. This means that even if you have set a style to display:none using jQuery inline, an internal style with !important will override it.

One alternative approach is to assign a class like 'active-category' to the selected div instead of directly setting display:inline-block, and another class 'default-category' to all default divs instead of repeatedly setting display:none. Then, you can target the active-category class in your CSS to define the desired style.

For example:

@media only screen and (max-width: 767px) {
    div.active-category {
      display: inline-block;
   }
   div.default-category {
      display: none;
   }
 }

Answer 6

Using !important in your CSS, whether it's external or internal, will take precedence over inline styles. This means that even if you have set a style to display:none using jQuery inline, an internal style with !important will override it.

One alternative approach is to assign a class like 'active-category' to the selected div instead of directly setting display:inline-block, and another class 'default-category' to all default divs instead of repeatedly setting display:none. Then, you can target the active-category class in your CSS to define the desired style.

For example:

@media only screen and (max-width: 767px) {
    div.active-category {
      display: inline-block;
   }
   div.default-category {
      display: none;
   }
 }

Answer 7

Answer №4

Include jQuery in your code like this:


      $("#franchisehub").on('click', function(){
        $(".franchisehubtv").toggleClass('display-inline');
      });
      //Repeat the above for all items

Test it out to see if it functions as intended. I believe this is what you were aiming for.

Answer 8

Include jQuery in your code like this:


      $("#franchisehub").on('click', function(){
        $(".franchisehubtv").toggleClass('display-inline');
      });
      //Repeat the above for all items

Test it out to see if it functions as intended. I believe this is what you were aiming for.

Hiding elements on mobile and tablet devices using display:none in html/css

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Intermittent connectivity issues causing clients to miss messages from Nodejs server

How can I resolve the vertical adjustment issue of Bootstrap 5 input group on mobile devices?

Ensure that the megamenu content is perfectly aligned with the container div

Smooth-scroll plugin does not activate active state (due to JS modification)

Issues encountered when trying to implement helperText in mui date picker

What's the best way to create flying text effects - using CSS or JavaScript

How to organize and reuse code efficiently with Node.js, EJS, and front-end JavaScript?

Configuring the color of the active page link in the navbar using Python Flask

JavaScript variable scoping problem arises when there are conflicts between two functions that utilize callbacks

Provide the option to assign values on select options in order to choose specific JSON data

The functionality of GET_POST is not functioning properly

Assistance with JavaScript Regular Expressions for formatting BBCode

What is the procedure for retrieving an object's property?

Fixed columns with horizontal scrolling to prevent Datatables columns from overlapping

Error in ReactJS: Trying to access property 'items' of an undefined object

The full height of the image cannot be captured by html2canvas

Are the topmost features of Winforms controls also available in Asp.net webform controls?

What advantages does using an RxJS Subject have over handling multiple event listeners individually in terms of speed

How to Implement Filtering in AngularJS ng-repeat

Unable to retrieve a specific property from a JSON object in JavaScript