Editing image sizes on homepage using debut theme

Technical Q&A
1

Do any of you know How I can reduce image sizes… my sites home page I added images via creating a collection page and they are too big… I can do a little in the theme editor but dont want to screw things up. Any advice for an old guy..??? deepseadreams.com

Thanks Keith

2

Hi @oldmariner ,

Hope you are doing well. In this case, I need access your site to check js on your site. But you also can hide it via css.

Please place this code at the end of timber.scss:

.template-index [data-section-type=“featured-products-section”] .grid-link__image {

display: flex;

height: 300px !important;

}

.template-index [data-section-type=“featured-products-section”] .product__img-wrapper.supports-js .product__img {

object-fit: cover;

}

But i suggest you also should change from 3 to 4 items on each row. If you want do that, please add this snippet too:

@media only screen and (min-width: 769px) {

.template-index [data-section-type=“featured-products-section”] .grid-link__image .post-large–one-third {

width: 25%;

}

}

Please take a look at our screenshot here: https://prnt.sc/112zdco

Hope this helps!

3

Hi! I have the opposite problem, I want to enlarge the product images on the home page. But I can’t find the timber section of the code in the debut theme. I tried adding the code at the bottom theme.scss.liquid but it didnt work :disappointed_face: