Centering products

[a1dan]

My products are off-centered but when I make them full width they're absolutely massive. Hoping someone can help with a fix for this. Thank you!

[KetanKumar]

@a1dan 
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.

[DaisyVo]

Hi @a1dan 

To fix the issue where your products appear off-centered and become too large when set to full width, you can adjust the CSS in your Shopify theme. Here's how you can center the products properly without making them overly massive:

Steps to Fix the Issue

1-Access Your Theme Code:

• Log in to your Shopify admin.
• Go to Online Store > Themes.
• Click Actions > Edit Code on your active theme.

2-Locate the Relevant CSS File:

• Look for the theme.css, styles.css, or similar file in the Assets folder.

3-Add or Modify CSS:

Add the following code at the end of the CSS file:

.product-grid {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}

.product-grid-item {

    max-width: 300px; /* Adjust to your preferred size */

    margin: 10px; /* Adds spacing between products */

    text-align: center;

}

@media (min-width: 768px) {

    .product-grid-item {

        flex: 1 1 calc(25% - 20px); /* For larger screens, 4 items per row */

    }

}

@media (max-width: 768px) {

    .product-grid-item {

        flex: 1 1 100%; /* Full width on smaller screens */

    }

}

4-Test the Changes:

• Save the file and preview your store.
• Check if the products are centered and their size looks appropriate on both desktop and mobile views.

5-Fine-tune if Necessary:

• If the products still appear too large or too small, adjust the max-width and calc values in the CSS.

Screenshot Reference

The code above centers your product grid and ensures the products are a manageable size. Here's an example visualized: https://prnt.sc/XtDdXu3BXZ2_

Let me know if this works for you! If you need any other assistance, feel free to reply, and I will try my best to help.

Best regards,
Daisy