Home › Forums › WoodMart support forum › Tabs Layout on Mobile

Tabs Layout on Mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 15, 2020 at 6:56 pm #173712

    mikewordpress
    Participant

    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.

    February 16, 2020 at 4:42 am #173745

    mikewordpress
    Participant

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

    February 16, 2020 at 4:57 am #173747

    mikewordpress
    Participant

    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

    February 16, 2020 at 9:00 am #173783

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    February 17, 2020 at 4:39 am #173889

    mikewordpress
    Participant

    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?

    February 17, 2020 at 11:02 am #173963

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    February 18, 2020 at 7:58 am #174181

    mikewordpress
    Participant

    Ok

    February 18, 2020 at 11:19 am #174260

    Elise Noromit
    Member

    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

Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)