How do you change the height of Debut Theme Collections List Images

Allan12
New Member
6 0 0

Hi

I am using Debut and have the collections list appearing on the homepage. I was trying to figure out where I can reduce the height on the collections list thumbnail images by 50%. I was playing around in theme.scss.liquid but nome of the adjustments I made seem to work. The site is easy-home-ware.myshopify.com I need to get rid of the titles too but I have the code ready and tested for this it’s just the height. 

0 Likes

Hi @Allan12,

 

You can try this code:

@media only screen and (min-width: 750px)
.medium-up--one-third {
    height: 255px;
}

 

The code will reduce the height of the collection list to 255px. You can adjust the value of the height until you like it. 

To apply the code, just copy and paste it into your theme's css file, normally, it's named theme.scss.liquid.

By the way, you are styling all buttons with the same color. This is inadvertently reducing the importance of the primary button. I suggest you change the color of the supporting button, and make the primary button the most prominent. 

You can read this article about how to optimize your homepage.

- Tips to optimize website loadspeed: academy.pagefly.io/how-to-speed-up-website

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
0 Likes
Allan12
New Member
6 0 0
That’s great I will have a look at the code later on. Incidentally aesthetic values are a very subjective matter although I do appreciate your direction. Many thanks. Allan
0 Likes
Allan12
New Member
6 0 0

Hi I tried the code and it broke the Home Page. I have made some changes to the padding around the collections list images so maybe that is not compatible, not sure really. Thanks for trying much appreciated.

0 Likes
mahkraumclayco
New Member
1 0 0

Hello! I am trying to do the same with my collection list on the homepage, but your code did not work for me. 

My images are all white with the colored rectangle in the middle, but I want to have less white part so the rectangles look closer together.

My site is mahkraum.com

Can you help me too? Thanks!

0 Likes