Merge Description Tabs (one border)

Solved
thomasmrgn99
Pathfinder
93 0 27

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.pngimage (1).png

 

 

 

 

 

 

 

 

 

 

 

 

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!

Accepted Solution (1)

Accepted Solutions
Amlibolikha
Shopify Partner
38 9 13

This is an 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

View solution in original post

Replies 6 (6)
Amlibolikha
Shopify Partner
38 9 13

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
Pathfinder
93 0 27

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

Amlibolikha
Shopify Partner
38 9 13

This is an 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
Pathfinder
93 0 27

@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

Amlibolikha
Shopify Partner
38 9 13

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
Pathfinder
93 0 27

@Amlibolikha Amazing, thanks 🙂