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

Highlighted
New Member
5 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
Highlighted

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
Highlighted
New Member
5 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
Highlighted
New Member
5 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