Tabs Layout on Mobile

Hi,

I used this code to force tabs layout on mobile with 2.X version. But after updating to 4.4, the code doesn’t seem to work. It’s tabs on desktop and accordion on mobile.

div.tabs-layout-tabs .tabs {
   display: block;
}

div.tabs-layout-tabs .woodmart-accordion-title {
   display: none;
}

div.tabs-layout-tabs {
    border:none;
}

div.tabs-layout-tabs .tabs {
    margin-top:-25px;
}

div.product-tabs-wrapper {
   border-top: 1px solid rgba(129,129,129,.2);
   border-bottom: 1px solid rgba(129,129,129,.2)!important;
}

div.tabs-layout-tabs .woodmart-tab-wrapper {
    border-bottom:none;
}

div.tabs-layout-tabs .woodmart-tab-wrapper .wc-tab {
    padding-bottom:0;
}

Could you please advise me how I can use tabs layout on mobile? I’ve set to tabs on theme settings.

Thank you.

Never mind about this topic. I just realized after updating the @media (max-width: 480px) in child style.css is not working.

Hi,
Even after putting the above css code to Custom CSS for mobile in Theme Settings does not change accordion layout to tabs on mobile.
So my questions are
1. How do I use Tab Layout on mobile now?
2. Does responsive css code such as @media (max-width: 480px) not work for child style.css anymore?

Thank you

Hello,

Please provide the site admin access to the private area as well as the product page URL

Best Regards

Hi Elise

Sorry there was some wrong code in my CSS that caused @media to not work correctly. I fixed it.

div.tabs-layout-tabs .tabs {
   display: block;
}

div.tabs-layout-tabs .woodmart-accordion-title {
   display: none;
}

div.tabs-layout-tabs {
    border:none;
}

div.tabs-layout-tabs .tabs {
    margin-top:-25px;
}

div.product-tabs-wrapper {
   border-top: 1px solid rgba(129,129,129,.2);
   border-bottom: 1px solid rgba(129,129,129,.2)!important;
}

div.tabs-layout-tabs .woodmart-tab-wrapper {
    border-bottom:none;
}

div.tabs-layout-tabs .woodmart-tab-wrapper .wc-tab {
    padding-bottom:0;
}

But this code for tab layout for mobile isn’t working for new version anymore. Would you be able to give me working code here?

Hello,

Please provide the site admin access to the private area as well as the product page URL

Best Regards

Ok

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.product-tabs-wrapper {
  margin-top: 50px;
  padding-top: 0 !important;
}
.tabs-layout-accordion {
  border-top-width: 1px;
}
.tabs-layout-accordion .woodmart-tab-wrapper {
  border-bottom: 0;
}
.tabs-layout-accordion .tabs {
  display: block;
}
.woodmart-accordion-title {
  display: none;
}
.tabs-layout-accordion .tabs {
    margin-bottom: 30px;
    text-align: center;
}
.tabs-layout-accordion .tabs li {
  display: inline-flex;
    margin-right: 30px;
    color: #2d2a2a;
    font-weight: 600;
}
.tabs-layout-accordion .tabs li a {
  position: relative;
    display: inline-block;
    padding-top: 30px;
    padding-bottom: 10px;
    color: inherit;
    text-transform: uppercase;
    font-weight: inherit;
    font-size: 16px;
    opacity: .7;
}
.tabs-layout-accordion .tabs li.active a {
  color: #5798ae;
}
.tabs-layout-accordion .tabs li a:after {
  content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: -2px;
    width: 0;
    height: 3px;
    transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.15);
    background-color: #5bc6cc;
}
.tabs-layout-accordion .tabs li.active a:after {
  width: 100%;
}

Best Regards

[Author]

Posts