How to fix mobile responsiveness issue on my product page?

Topic summary

Mobile responsiveness problems on the product collection page (fttmaxllc.com/collections/all) were reported, with screenshots shared via a .rar file after initial attachment issues.

A suggested CSS change (“object-fit: contain” applied to product grid images in styles.css) improved the mobile layout on the first page. Object-fit: contain ensures images fit within their containers without cropping.

The issue reappears on the second and third product pages (pagination), where product images look inconsistent and “messed up.” One participant reports it works on their end; no additional fix or root cause was provided. The request for a permanent, site-wide solution ensuring uniform image sizes across all product pages remains open.

General guidance was offered on mobile optimization: prefer responsive design over separate mobile sites, considering Google’s mobile-first indexing (Google primarily uses the mobile version for ranking). Key focuses are visibility, navigation, and speed.

Status: partially resolved. Action items implied: verify that the CSS applies to paginated templates, check image aspect ratios and container styles across pages, and ensure consistent selectors or theme settings for all collection pages.

An unrelated query about building a landscaping services site on Shopify was raised but not addressed.

Summarized with AI on February 4. AI used: gpt-5.

It worked thankyou!