Photos misaligning on desktop collection pages on wide screens

Topic summary

Main issue: Product photos on desktop misalign on very wide screens despite consistent aspect ratios (Prestige theme v9.0.2). Misalignment appears on collection pages and also on the homepage’s collection list.

Fix for collection pages: Add a CSS rule in assets/theme.css to force images to fill their containers: selector .collection__main .product-card .product-card__image with width: 100% !important. Path provided: Online Store > Edit Code > assets > theme.css (place at bottom).

Fix for homepage collection list: Add a second CSS rule in assets/theme.css: selector .product-list .product-card .product-card__media img with width: 100% !important.

Rationale: Forcing image width to 100% of the card/media container aligns tiles consistently across wide viewports.

Assets/attachments: Multiple screenshots showing misalignment were shared and are central to understanding the issue.

Status: Actionable CSS provided for both contexts; no explicit user confirmation yet on the final outcome, but the thread provides clear implementation steps and appears near resolution.

Summarized with AI on December 27. AI used: gpt-5.

Hi all,

Just wondering if anyone can help with some code to help with these photos misaligning on desktop?

It only happens on wider screens, and they realign when you make the window smaller. The photos are all the same aspect ratio etc.

My theme is Prestige version 9.0.2

Website: Neilo Graders | Unprecedented Precision

Would appreciate any assistance or direction :slightly_smiling_face:

@toddhart

you need to put the below css code into your theme.css file

.collection__main .product-card .product-card__image {
	width: 100% !important;
}

Online Store > Edit Code > assets > theme.css file place the code at very bottom and hit save.

Thanks

1 Like

Hi Liqiud_xPert_SJ

Thanks for your help with the other issue above. Are you able to help me with a similar issue on the home page?

When the collection list gets too wide, the photos misalign here again.

Is there a way I can fix that?

LMK :slightly_smiling_face:

1 Like

Yes sure I can do that for you give me a while to write code for it. Thank you for get in touch

1 Like

@toddhart

here is your code, you need to put the below css code into your theme.css file

:slightly_smiling_face:

.product-list .product-card .product-card__media img {
	width: 100% !important;
}

Thanks

1 Like