Excess padding under featured collection

[jjdesign1]

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/

[PaulNewton]

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.

[Sweans]

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:-

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

[jjdesign1]

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

[Sweans · Accepted solution]

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

[jjdesign1]

Thank you very much