Make collections list thumbnails on home page smaller - please help!

Store Design
1

i am going to pull my hair out lol

i am using a paid theme called “emerge”

for my “hero” photos for my collections, i am not using photos at all. rather, i’d like them to look like little icons. however, they are massive and resize to be huge depending on the screen resolution. i just want itty bitty images to be centered above the names of my collections.

i can’t seem to figure out how to do this. i have searched everywhere to no avail. any idea?

pinkplantgang.com

thank you for any help!

2

Hi @pinkplantgang ,

First of all, stop pulling yours hears they are expensive to get back.

Now add the following code to your theme.scss.liquid file

.featured-collections--image {
height: 40px !important;
}

.featured-collections--image .image-container {
    padding: unset;
    padding-top: unset;
    position: relative;
}

.featured-collections--image .image-container img{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 45%;
    left: 45%;
}

Adjust the width and height value according to your itty bitty image sizes that you want.

3

thank you very much. i tried that code and it made everything go crazy.

however, i would like to note that my file is called theme.css.liquid. can’t seem to find a theme.scss.liquid anywhere!