Problems with Collection image size, Is too small when there only are one or two products

Store Design

Topic summary

A user reports that product images on collection pages appear too small when filtering results down to only 1-2 products, while 4+ products display correctly. The issue occurs in the Flex Bloom theme.

Problem Identification:

  • One responder confirmed the issue exists when product counts are low
  • The root cause appears to be CSS class “one-fourth” that needs conditional logic adjustment
  • An inspect tool screenshot shows the problematic code in the collection template

Proposed Solutions:

Two CSS fixes were offered:

  1. made4Uo’s approach: Remove the “one-fourth” class and fix the related if statement in the collection file (requires theme-level changes)

  2. GemPages’ solution: Add custom CSS to Style.css targeting .collection__content .collection__main .collection-matrix .one-fourth .product-image-wrapper .image-element_wrap img with a fixed width of 927px

Recommendation: Contact the theme provider for the proper fix, as the issue involves template-level conditional logic.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

I am using the Flex bloom theme. There is no problem if the number of products is 4 or more on the collection pages. However, the dimensions of the product field change if I use the product filter and it’s just 1 or 2 product.

This is the link: https://casa-nativa.cl/

1 Like
2

Hi @CasaNativa
Just checked your store, but I didn’t see any the problem,
Can you share some screenshot or how we can reproduce the problem to check?

3

Hi @CasaNativa ,

I was able to see the problem, your product size is smaller when you have 1 or 2 products. I would suggest contacting the theme provider.

We can make changes but to do it right, you need to remove the one-fourth code. There would be an if statement that need fixing.

The website looks like this after I remove the one-fourth class

made4Uo_1-1668791087421.png
made4Uo_1-1668791087421.png1332×740 63.1 KB

The code is in the collection. See the inspect tool here

made4Uo_0-1668791024308.png
made4Uo_0-1668791024308.png1110×651 43.9 KB

You can also do the following to fix the problem.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the style.scss
  3. Paste the code below at the very bottom of the file.
.one-fourth.medium-down--one-half.small-down--one-half.column.has-thumbnail-sticker.has-secondary-image-swap.thumbnail.product__thumbnail.product__grid-item.thumbnail__hover-overlay--false.has-padding-bottom {
    width: calc(100% - 20px);
}
4

Hi @CasaNativa

I would like to give you some recommendations to support you.

Please go to Online Store > Themes > click 3 dots button > Edit code > Style.css add code at the end of the file Style.css

.collection__content .collection__main .collection-matrix .one-fourth .product-image__wrapper .image-element__wrap img {
    width: 927px !important;
}

I hope you find the answer useful or if you need further support, do not hesitate to reach out to us.

Kind & Best regards,
GemPages