How to reduce gaps between tabs in Expanse these

How to reduce gaps between tabs in Expanse these

jenningsandcox
Tourist
15 0 2

Hi there

 

I am looking for the correct code to use in order to close the gaps between the different tabs I have on my default product page.

 

I use EXPANSE theme, and in the "product" block use several tabs to display information such as measurements, shipping information etc however the gaps in between the tabs are too large and so I am looking to condense them down.

 

Any help or advise is much appreciated.

Screenshot 2024-06-27 113220.png

 

 

 

Many thanks

Replies 5 (5)

sahilsharma9515
Shopify Partner
1076 132 203

Hi @jenningsandcox 

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

 

Best regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Moeed
Shopify Partner
4316 1109 1361

Hey @jenningsandcox 

 

Share your Store URL and Password if enabled.

 

Best Regards,

Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
jenningsandcox
Tourist
15 0 2

Made4uo-Ribe
Shopify Partner
6841 1634 2014

Hi @jenningsandcox 

Check this one. 

  1. From you Admin page, go to Online Store > Themes
  1. Select the theme you want to edit
  2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  3. Then place the code below at the very bottom of the file.

 

.product-block {
    margin-bottom: 10px !important;
}
.product-block.product-block--tab {
    margin-bottom: 15px !important;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1719488356504.png

    Note: The original size are 20px and 30px on the tab. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
jenningsandcox
Tourist
15 0 2

Hi there

 

I only have theme.js in my asset folder, none of the other that you suggested however, it does work when pasted into the custom CSS section when customizing the product page - I'm assuming it would be fine to leave it there?

 

Many thanks