Images not filling container LOCAL Theme

Store Design
,

Topic summary

A user is experiencing an issue where collection container images are not filling their entire containers on the LOCAL theme. The problem also affects blog images at the bottom of the homepage.

Troubleshooting Attempted:

  • A support member provided CSS code to add to the Assets/theme.css file, targeting lazy-loaded images with transform and scale properties
  • Initial implementation resulted in images only filling the top half of containers
  • The code was tested on a test theme rather than the live site, so changes weren’t visible for verification

Current Status:

  • The issue remains unresolved
  • The user is in the midst of a theme update and notes the problem doesn’t appear to occur on the updated theme
  • Further troubleshooting has been paused due to the ongoing theme migration
Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

The images for my Collections containers are not showing correctly. They are not filling the entire container. Can someone point me to the setting that I need to change to make them fill the entire container?

Screenshot 2024-10-08 at 11.40.12 AM.png
Screenshot 2024-10-08 at 11.40.12 AM.png2022×938 258 KB

2

Hi @JoannN ,

Could you please share your URL store? I will help to take a look.

3

Thank you so much! I appreciate any help you can offer.

https://www.bodyhelix.com/

At the bottom of the homepage, you can see that it is happening with the “blog” images.

4

Hi,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Assets/theme.cs
  2. Add code below to end of file
#main .blog-item  .lazy-image.lazy-image--animation.lazyloaded img {
  transform: scale(1) translateY(-50%);
}
.no-touchevents #main .blog-item  a:hover .lazy-image.lazy-image--animation.lazyloaded img {
  transform: scale(1.1) translateY(-50%);
}
5

Thanks!! I will try that and let you know. I really appreciate your help!

Joann

6

I did that. This was the result. It now fills only the top half of the container.

Screenshot 2024-10-10 at 12.22.39 PM 2.png
Screenshot 2024-10-10 at 12.22.39 PM 2.png2058×1258 233 KB

7

Hi,

Do you add code to Assets/theme.css file? I checked code. However, I didn’t see any code has been added .

EBOOST_0-1728613752305.png
EBOOST_0-1728613752305.png1568×981 289 KB

It should be like the screenshot below after apply code

EBOOST_1-1728613784974.png
EBOOST_1-1728613784974.png1920×8702 1.59 MB

8

Sorry for the delay. I tried what you gave me on a test theme. I’m always scared to try things on the live theme! That’s why you didn’t see it. We are in the midst of a theme update, and it doesn’t seem to be happening on the updated theme. So, I haven’t pursued it any further. I appreciate your response, even though it did not work! Thanks for taking the time to answer.