Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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
Hi @thomasmrgn99 ,
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;
}
Hi thanks @Amlibolikha for helping
It has gone into one line but the spacing is different for each tab now
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
@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?
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. ^^
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024