HI,why on mobile the page doesnt stay centered? CSS PROBLEM/PLEASE HELP

Shopify Discussion

Topic summary

A Shopify store owner encountered a CSS layout issue where product cards on a collection page were not centered on mobile devices.

Problem identified:

  • Product cards had width: 80% applied in mobile view, causing misalignment
  • The .card-wrapper CSS class was the source of the centering issue

Solutions provided:

  1. Add margin: 0 auto !important; to .product-card-wrapper
  2. Modify .card-wrapper to use width: 100% and height: 100% within a media query for screens under 500px

Resolution:
The issue was resolved using the second solution, which adjusted the card wrapper dimensions specifically for mobile viewports.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Screenshot 2025-10-14 155015
Screenshot 2025-10-14 1550151920×944 187 KB

Hi, please help me understand why on mobile, on this page, the products cards doesnt stay on the center side? what is the problem?Compleuri Casual – Lux Era by IR

2

Hi, William from PageUni here. Please add this CSS rule to your custom CSS in theme editor:

.product-card-wrapper {
  margin: 0 auto !important;
}

Hope it helps :wink:.

1 Like
3

a blessed day @sao

I checked your CSS in mobile, this is because it was

it has width: 80%

set it like this

.card-wrapper{
color: inherit; height: 80%; width: 80%; position: relative; text-decoration: none;
@media screen and (max-width: 500px){
width: 100%;
height: 100%;
}
}

4

Thanks a lot!! you helped me very good and quicly, appreciate!

1 Like