How can I adjust image size on Turbo Theme?

Store Design

Topic summary

Main issue: Images on the home page and collection pages in the Turbo Theme appear too large; the requester wants to reduce their size or set specific pixel dimensions. Store URL was provided for context.

Attempted solution: A helper suggested adding custom CSS in styles.css targeting collection list images:

  • .list-collections .image-element__wrap set to position: relative with padding-top: 100% (forces a square aspect ratio).
  • .list-collections .image-element__wrap img set to position: absolute with top/left/right: 0 (fills the wrapper).
    This approach changes layout/ratio rather than explicitly setting pixel sizes.

Outcome: The requester reported no visible change after applying the CSS. No further troubleshooting steps or alternative methods were discussed.

Status: Unresolved/ongoing. Key open questions include whether the CSS selectors match the Turbo Theme’s markup, if styles.css is the correct asset for overrides, and how to set precise image dimensions (pixels) for the home and collection pages.

Notes: The provided code snippet is central to the discussion; no images or attachments beyond the store URL were referenced.

Summarized with AI on February 13. AI used: gpt-5.
1

Hello!
The images on the home page and the collection page are very big.
How can I change to pixels or the image size?

The store URL: https://www.vibes12.com

1 Like
2

@Hadargiladi

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.css ->paste below code at the bottom of the file.
.list-collections .image-element__wrap {
    position: relative;
    padding-top: 100%;
}

.list-collections .image-element__wrap img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
3

Hi!
It didn’t change something