Making the gaps on my product page smaller

[sixdreamz]

hi,

so i want to make the gaps (marked in red) on my product page smaller. could you help me?

URL: sixdreamz.com

Password: sdc2003

[Iwillsolveit]

To reduce the gaps on your product page, you'll need to adjust the CSS. Here’s how you can do it:

1. Access Your Theme’s CSS:

From your Shopify admin, go to Online Store > Themes.

Click on Actions next to your active theme and select Edit code.

Look for the Assets folder and open the file named theme.css or styles.css, depending on your theme.

2. Identify the Gaps:

Use your browser's Developer Tools (right-click on the page and select "Inspect") to locate the elements with gaps. Check the margin or padding properties causing the spaces.

3. Add CSS Code:

Once you identify the elements, add custom CSS to reduce the gaps. Here’s an example:

.product-card {

    margin-bottom: 10px; /* Adjust this value */

}

You may need to adjust other classes based on your inspection.

4. Save Changes:

After making your adjustments, click Save.

5. Check Your Store:

Refresh your product page to see if the gaps have been reduced.

If you share specific classes or sections from your product page that have the gaps, I

can provide more targeted CSS adjustments!

[Rahul_dhiman]

Hello @sixdreamz 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> section-main-products.css
add this code at the end of the file.

@media screen and (min-width: 990px) {
.product--medium:not(.product--no-media) .product__info-wrapper, .product--small:not(.product--no-media) .product__media-wrapper {
max-width: 50% !important;
}
}

result
 

If this was helpful, hit the like button and accept the solution.
Thanks

[sixdreamz]

sadly it doenst work.

[websensepro]

Hi @sixdreamz ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
    .product__info-wrapper--extra-padding {
        padding: 0 0 0 2rem !important;
    }

</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!