Changing size of image for featured collections on homepage

Allison_Callawa
New Member
2 0 0

Hi, my site http://activistskincare.com has two featured collections on the homepage, and the images are being cropped vertically. How can I set the height to something different?

0 Likes
Alma_Alva
Tourist
10 0 1

Hi Allison!

I've checked your website and I saw the collection pictures shrink like this (attached) when in an smaller display. This is part of the responsive design and I've also noticed that the height is set to 130px. Changing the value of this to over 300 px would solve the issue. You can find the theme.scss.liquid snippet in the Assets folder. And look for this part:

@media screen and (max-width: 590px)

.collection-collage__item.one-half {

      height: 130px;

}

Hope this works for you! And if you have trouble finding this snippet or need any help with you shop, The Shop Tinkerers does small tasks for your shopify website! You can check our list of products here: https://theshoptinkerers.com/collections/small-tasks.

Best,

Alma

0 Likes
Jason
Shopify Expert
10294 145 1947

The code above has errors, and won't work as expected. Please don't copy and paste this into your stylesheet. To correct the errors it should look like this (but I still wouldn't suggest using it).

@media screen and (max-width: 590px){
  .collection-collage__item.one-half {
    height: 130px;
  }
}

Part of the problem you're seeing is because the images themselves have large portions of white space in them. For example this pic has a big block of white at the bottom. The styles are telling the browser to make sure the image fills the entire box. It's actually doing that correctly - but appears like it's not since that white chunk is peeking through.

What's the reasoning behind adding that to your images?

@Alma - Love that you're trying to help but please check your code before posting. I can see other posts from you with the same issue. Also, if your self promotion is the main reason you're replying you'll quickly find those posts will start getting spam blocked. 

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Allison_Callawa
New Member
2 0 0

@Alma and @Jason, thank you for helping with this!

@Jason, the white added to the bottom of the images was just so that I could get all the important imagery into the top part of the image, before it got cut off by the code. Previously much of the image was below the cutoff so I moved it up. It's only white at the bottom now because there wasn't any more photo left.

If I use a full square image (without the white chunk), the bottom half of the image gets cut off, and it happened to be really important parts of the image that were getting cut off (see image attached).

What would you recommend doing instead of the code fix?

 

 

0 Likes
Akhilkotha96
Excursionist
50 0 3

I have issue of reducing the height of images in featured collection page.

Can you please tell how to decrease height of images in featured collection section called what's trending.

we are using impulse theme and url is gullylivefast.com

0 Likes
diip
Tourist
3 0 1

Where is the Shopify Team to help with this problem. As I see many people have the same issue and in all community aren't any solution. 

0 Likes