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
1266 165 244

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
6733 1819 2201

Hey @jenningsandcox 

 

Share your Store URL and Password if enabled.

 

Best Regards,

Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


jenningsandcox
Tourist
15 0 2

Made4uo-Ribe
Shopify Partner
9865 2347 2945

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an 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