CODEWITHSUNDEEP
javascriptjqueryhtmlcssmedia-queries
flash
flash

Reputation: 1519

Applying display:none in mobile/tablet view in html/css

I have a fiddle which is working perfectly fine in desktop view. On desktop view, it is working in a way that on click of any product item (as shown in the screenshot below), the description box gets displayed at the bottom.

enter image description here

In mobile view I am seeing all the description boxes gets displayed at the bottom without being clicked at the top.


The snippets of CSS codes which I have 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%;
  }
}



Problem Statement:

At the moment. I am seeing all the the boxes getting display at the bottom even it is not clicked.

I have feeling that I am using display: inline-block !important which is overriding display:none from 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 am wondering what changes I should make in the CSS codes so that I can apply display: inline-block !important only to one product item instead of all items.

Upvotes: 0

Views: 1526

Answers (4)

Khushbu Vaghela
Khushbu Vaghela

Reputation: 619

Just add jquery as below:

      $("#franchisehub").click(function(){
        $(".franchisehubtv").css('display', 'inline-block');
      });
      //add for all items

Try if it works. Hope this is what you want.

Upvotes: 0

Khushbu Vaghela
Khushbu Vaghela

Reputation: 619

Just add this jquery for all the sections

$(window).resize(function(){
   if ($(window).width() <= 767) {  
          $("#franchisehub").click(function(){
            $(".franchisehubtv").css('display', 'inline-block');
          });
          //add this condition for all sections 
   }       
});

And remove this css :

@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;
}
}

Upvotes: 1

Karthikeyan
Karthikeyan

Reputation: 302

When you use !important in your css (external or internal) it overrides the inline style. So though you are setting it to display:none inline using jQuery , the internal style with !important overrides the inline style.

You can add a class like 'active-category' to the div thats selected instead of setting the display:inline-block and a class 'default-category' to all the default ones instead of setting display:none every time. And then target the active-category class in your css and set the style

eg. 

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

Upvotes: 0

Karthikeyan
Karthikeyan

Reputation: 302

You are setting all the boxes in the bottom to display:none except for the one thats active in your click handler. In that case you don't need the below css at all. I tried your fiddle and removed this css style and it works as you need in screen widths less than 767px as well

@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;
}
}

Upvotes: 0

Related Questions