Merge Description Tabs (one border)

[thomasmrgn99]

Hi,

Can anyone help me make it so that there is only one border between description tabs, instead of two?

What it looks like now vs what I would like:

Appreciate any help. Website is https://pawcopets.co.uk/calmingbed

This is the code I have so far for the tabs:

span.txt_h_tab {
    font-size: 17px !important;
    color: #121212 !important;
    margin-right: 20px !important;
    font-weight: 600 !important;
    margin-top: 4px;
    margin-bottom: 4px
}

span.nav_link_icon.ml__5 {
    background: white !important;
    color: #5e5e5e !important;
}
a.tab-heading.flex.al_center.fl_between.pr.cd.chp.fwm {
    border-bottom: 1px solid #e2e2e2 !important;
    border-top: 1px solid #e2e2e2 !important;

.heading.bgbl.dn { background: transparent !important;}

Thanks!

[Amlibolikha]

Hi @thomasmrgn99 ,

You can replace your code by below code:

span.txt_h_tab {
    font-size: 17px !important;
    color: #121212 !important;
    margin-right: 20px !important;
    font-weight: 600 !important;
    margin-top: 4px;
    margin-bottom: 4px
}

span.nav_link_icon.ml__5 {
    background: white !important;
    color: #5e5e5e !important;
}
a.tab-heading.flex.al_center.fl_between.pr.cd.chp.fwm {
    border-top: 1px solid #e2e2e2 !important;
}
.heading.bgbl.dn { background: transparent !important;}
.theiaStickySidebar #shopify-section-pr_description {
    border-bottom: 1px solid #e2e2e2 !important;
}

Hope it can help you.

[thomasmrgn99]

Hi thanks @Amlibolikha for helping

It has gone into one line but the spacing is different for each tab now

[Amlibolikha · Accepted solution]

Hi @thomasmrgn99 ,

Thanks you for reply.

You can try replace previous code by below code:

span.txt_h_tab {
    font-size: 17px !important;
    color: #121212 !important;
    margin-right: 20px !important;
    font-weight: 600 !important;
    margin-top: 4px;
    margin-bottom: 4px
}

span.nav_link_icon.ml__5 {
    background: white !important;
    color: #5e5e5e !important;
}
a.tab-heading.flex.al_center.fl_between.pr.cd.chp.fwm {
    border-top: 1px solid #e2e2e2 !important;
}
.heading.bgbl.dn { background: transparent !important;}
.theiaStickySidebar #shopify-section-pr_description {
    border-bottom: 1px solid #e2e2e2 !important;
}

.theiaStickySidebar .des_style_2.sp-tab:not(:last-of-type) {
    margin-bottom: 0 !important;
}

Hope it can help you

[thomasmrgn99]

@Amlibolikha Amazing, thanks!

Is it possible to push the text to the left, to the start of the tab, inline with the start of the line?

[Amlibolikha]

Hi @thomasmrgn99 ,

You can try below code:

span.txt_h_tab {
    font-size: 17px !important;
    color: #121212 !important;
    margin-right: 20px !important;
    font-weight: 600 !important;
    margin-top: 4px;
    margin-bottom: 4px
}

span.nav_link_icon.ml__5 {
    background: white !important;
    color: #5e5e5e !important;
}
a.tab-heading.flex.al_center.fl_between.pr.cd.chp.fwm {
    border-top: 1px solid #e2e2e2 !important;
}
.heading.bgbl.dn { background: transparent !important;}
.theiaStickySidebar #shopify-section-pr_description {
    border-bottom: 1px solid #e2e2e2 !important;
}

.theiaStickySidebar .des_style_2.sp-tab:not(:last-of-type) {
    margin-bottom: 0 !important;
}
.tab-heading .txt_h_tab {
    padding-left: 0 !important;
}

Hope it can help you. ^^

[thomasmrgn99]

@Amlibolikha Amazing, thanks 🙂