Remove Image Margin Product Page

[martujv]

Hello!

Basically I want to remove the margins that the images have on the product page. (Only on desktop)

This is because I have the transparent header activated but there is still a gap between the header and the images on the desktop version that does not allow to see the white logo and header icons because the background is also white.

The margins I mean are the ones that do not allow the image section to occupy the entire screen.

It is easier to see with this images:

- This is how it looks right now. The red lines show the current size of the images and the blue lines show the gap on top and on the left.

- This is how it should look: the red lines show the new limits of the image section, so it would occupy the whole screen without gaps

My theme is Stiletto and my website is www.winnerofficial.com

I tried many codes but nothing works!

[Roy-ロイ · Accepted solution]

Hi  @martujv ,

I'm happy to help you with that! You can easily achieve this by adding a simple CSS code to your theme.

To get started, follow these steps:

1. Log in to your Shopify Admin panel.
2. Go to Online Store > Theme > Edit code.
3. In the code editor, navigate to the theme.css file.

Now, add the following code at the end of the file:

@media (min-width: 960px) {
  .product.is-visible {
      margin-top: 0;
  }
  
  .product__primary-right {
      margin-top: var(--spacing-10);
  }
}

[Roy-ロイ · Accepted solution]

Hi  @martujv ,

I'm happy to help you with that! You can easily achieve this by adding a simple CSS code to your theme.

To get started, follow these steps:

1. Log in to your Shopify Admin panel.
2. Go to Online Store > Theme > Edit code.
3. In the code editor, navigate to the theme.css file.

Now, add the following code at the end of the file:

@media (min-width: 960px) {
  .product.is-visible {
      margin-top: 0;
  }
  
  .product__primary-right {
      margin-top: var(--spacing-10);
  }
}

[martujv]

It worked! Thank you. One more thing, is there any way to edit this same margin on mobile version?

[Roy-ロイ]

Definitely! Let me know what you are trying to achieve in mobile so that I can help you with the code?

Kind Regards, 
Roy

[Sweans · Accepted solution]

Hi @martujv ,

I noticed your query about removing the margin on your product page. I've inspected the page and found the solution.

Below, I've included a screenshot of the changes:

Before:

After:

To achieve this, you need to add the following CSS code to your stylesheet:

@media (min-width: 960px) {
.product {
margin-top: 0px;
}
}

Please check the screenshots to see the difference before and after applying the code.

Let me know if this helps or if you need any further assistance!
If it does, please like it and mark it as a solution!

Regards,
Sweans

[martujv]

It worked! Thank you. One more thing, is there any way to edit this same margin on mobile version?

[Sweans]

Hi,

I'm Happy to hear that the solution worked!

To edit the same margin on the mobile version, please remove the media query from the CSS code. The updated code should look like this:

.product {
margin-top: 0px;
}

This will ensure the margin is removed on both desktop and mobile devices.

Regards,
Sweans