How can I merge description tabs to have only one border?

Store Design
1

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:

image.png
image.png400×191 3.52 KB

image (1).png
image (1).png399×258 5.46 KB

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!

2

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.

3

Hi thanks @Amlibolikha for helping

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

Screenshot 2022-05-06 at 11.15.09.png
Screenshot 2022-05-06 at 11.15.09.png552×263 12.4 KB

4

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

5

@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?

Screenshot 2022-05-06 at 11.30.35.png
Screenshot 2022-05-06 at 11.30.35.png531×259 13.3 KB

6

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. ^^

7

@Amlibolikha Amazing, thanks :slightly_smiling_face: