Excess padding under featured collection

Store Design
, , , , ,

Topic summary

A Shopify store owner is experiencing excessive padding beneath featured collections (Menswear and Handbags) after enabling the carousel feature. The padding appears equivalent to the space previously occupied by two rows of products.\n\nTroubleshooting attempts:\n- Reverted all theme code to a previous version from 3 days prior\n- Issue persists despite rollback\n\nProposed solutions:\n\nInitial suggestion (PaulNewton):\n- Validate HTML for unclosed elements\n- Test with a fresh theme install (not a duplicate) to isolate the issue\n- Systematically reproduce the problem by adding sections\n\nCSS fix (Sweans):\n- Locate styles.css at line 7519\n- Find the .section-featured-collection .product-carousel-peek selector\n- Add height: 325px !important; to the existing CSS rule\n\nResolution:\nThe CSS modification appears to have resolved the issue, with the original poster expressing gratitude for the solution.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi,

was looking for some help please.

When I enable the carousel feature on two of my featured collections, Menswear and Handbags, there is a large amount of excess padding under each collection. Before enabling the carousel, I had two rows of products, and the padding seems to be the same amount as if there were still two rows of products. However, after enabling the carousel, this padding persists and creates a large gap on my website.

I have reverted all my theme code to the one I had 3 days ago, incase some of my header, liquid.css changes caused this. Yet, this has not fixed my problem

I would be eternally grateful for any help, I am completely lost.

Website: https://belascos.co.uk/

2

Hi @jjdesign1 Validate the theme’s html https://validator.w3.org/ fix any egregious issues like unclosed elements.

Minimize noise,

testing a raw install removes variables, as does making a page with limited sections and as many features as possible turned off/on until the issue reoccurs.

Install a new copy the theme, NOT a duplicate of the live theme, and start setting it up like the live theme to see if you can reproduce the issue.

Either this a bug in the theme itself for those sections, the slider library, an app, or customizations you have done for the theme.

If it’s in a raw install contact the themes developers or seek development services.

If you need this debugged and fixed then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Hi @jjdesign1 ,

To adjust Excess padding under featured collection

please follow the steps below:

1.Go to your Shopify Admin.
2.Navigate to Online Store > Themes.
3.Find the theme you’re using and click Actions > Edit code.
4.In the left sidebar, under the layout directory, click liquid.css

paste the code and save

.featured-collection {
height:523px !important; //adjust width as needed
}

Result:-

Sweans_0-1721795588807.png
Sweans_0-1721795588807.png1231×608 165 KB

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

4

Thanks for the answer. Under layout I have theme.liquid and password.liquid. I tried it above in theme.liquid and it did not change anything. I assume this is the wrong place to input the code? Thank you

5

Hi @jjdesign1 ,

update the code in styles.css.

search the code line number:7519

.section-featured-collection .product-carousel-peek, .section-product-template-product-list .product-carousel-peek, .section-product-list .product-carousel-peek {
position: relative;
}

change the code as below

.section-featured-collection .product-carousel-peek, .section-product-template-product-list .product-carousel-peek, .section-product-list .product-carousel-peek {
position: relative;
height: 523px !important;
}

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

1 Like
6

Thank you very much