Duplicate store has spacing differenes

Hello,

Every time I create a duplicate of my store, there is a small change in the spacing of an image. This is the live store with the correct spacing, notice the space between the image and the edge of the screen is equal on both sides(the screenshot goes from edge to edge).

This is the spacing whenever I duplicate the store. The distance on the left is equal but the distance on the right is greater, the image gets slightly smaller I think. This is what it looks like immediately after duplication. I want to use a duplicate to make changes via claude without it effecting the live site, but this issue happens whenever I make a duplicate, and claude doesn’t seem to be able to fix it either. Any assistance would be appreciated.

It’s a bit hard to say just from the screenshots…

Is there anything else different about the screen, for example is there a bar saying that it’s a preview? That could be also changing the display size and changing the dimensions.

I notice that in the top pic with the phone, all 4 of the round corners are fully visible, but in the bottom one only the top two are present. Could be because the shot was cropped differently.

If you can provide the link to your store and maybe the preview page, some of the clever people here could help you for sure.

Nathan

I agree with the suggestion above. I’d also check whether an app embed or custom Liquid snippet is injecting the banner in addition to the section added through the Theme Editor.

A quick test is to temporarily disable the related app block/embed and refresh the page. If one banner disappears, you’ve found the source of the duplicate.

Hello, thank you for the response. The live store link is zeroblue.com.au password ‘zero123’, duplicate store preview link is https://scsyjg1d2iqi0qf6-96221692218.shopifypreview.com . The duplicate was created a few minutes ago with no changes made. Yeah the screenshots were cropped differently, hopefully the live links can show more.

Hi @zidane11

This is most likely caused by a theme setting, CSS difference, or a breakpoint/container calculation between the live theme and the duplicated theme. A Shopify duplicate should normally preserve the theme code and settings, so if the spacing changes immediately after duplication, I’d compare the live and duplicate theme rather than trying to fix it with random CSS.

I’d check the section/container width, padding, max-width, grid/flex settings, and any responsive CSS affecting that image. I’d also compare the relevant theme settings between the live and duplicate versions.

If you can share the store URL and the duplicate theme preview URL, I can compare both versions and identify what is causing the right-side spacing difference.

Best regards,
Devcoder :laptop:

Hello, I think I’ve done something similar in regards to checking to checking the dimensions, in each case the dimensions showed to be the same in inspector. The live version is zeroblue.com.au password zero123 and duplicate is https://scsyjg1d2iqi0qf6-96221692218.shopifypreview.com

Hello, not too sure how to do this, also do you mean for a duplicated image or the spacing issue in the duplicated store?

Hi @zidane11

I found the issue. The problem is with the section/block-specific ID used in the CSS.

When the section is duplicated in Shopify, the section ID changes, so this CSS selector:

#shopify-section-template--27436773998906__custom_content_fm4LAK .m-custom-content__block:last-child {
    padding-right: 0;
}

no longer matches the duplicated section. Because of that, the default padding-right is applied again, which creates the extra spacing on the right side.

In the duplicate theme, I can see the image block currently has:

style="padding-right: 0;"

but the existing CSS is tied to a specific Shopify section ID. We should change the CSS to target the section/class instead of the dynamic Shopify ID. That way, it will continue working even when the section is duplicated.

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > main.css and paste this at the bottow of the file:

For example:

@media (min-width: 768px) {
  .m-custom-content__block:last-child {
    padding-right: 0;
  }
}

Best regards,
Devcoder :laptop:

Hi @zidane11

Think difference is that you have

@media (min-width: 768px) {
    .m-custom-content__block:last-child {
            padding-right: 0;
        }
}

In your section Custom CSS, on the original store, but that should have been copied over with a theme.

So try to check new store Custom CSS setting for that block.

This worked! Thank you

Hi @zidane11

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts. :white_check_mark:

Best regards,
Devcoder :laptop: