Product Image Remove Padding - Prestige Theme

[emilyaugstudios]

Hi everyone! Is there a way to remove the padding from the left hand side of the screen so my product images are full width without effecting the product information side? I have attached some images to show what I mean! My store URL is – https://927103-16.myshopify.com/

Thank you 😊

Current look -

What I'm wanting -

[Moeed · Accepted solution]

Hey @emilyaugstudios 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.container {
    margin-left: 0 !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Geist]

I checked the site and there seems to be an error with the css on the product page. If you want to remove the padding or margin so it takes up the full page width you should not use !important and that code should not go in the theme liquid file. Your themes css should ideally go in the css file to keep your code organized. Secondly, since you want to adjust the padding/margin here, you need to use a media query since the styles are being applied for desktop. The reason you need to use media queries is because it seems the mobile design has been accidentally affected. Notice now how the paypal and checkout buttons are on the left side being cut off. 

 

[emilyaugstudios]

Thank you for your help and advice, its appreciated! What code should I be adding to ensure this doesn't affect the mobile site? I did actually apply the code to CSS rather than theme liquid anyway 😊

[Geist]

Firstly you can go to your site and right click and inspect. You can see where the spacing is coming from by hovering over the html elements. The spacing comes from the `div class="container"></div>`. It has a margin set which is distance away from the element, you will see it represented as orange in devtools.

The following style is being applied.

.container {
    --distance-to-bleed: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    margin-inline-start: max(var(--container-gutter),50% - var(--container-max-width) / 2);
    margin-inline-end: max(var(--container-gutter),50% - var(--container-max-width) / 2);
}

Now you can remove the !important declaration here. This is totally a wrong use case for it and bad css practice. The style is applied without it anyways.

I personally would've changed the structure of the product page to make it cleaner and just use css flex box but if you want a quick fix, the design breaks at 1000px for desktop.

That means you can write the media query and these styles will be applied only above 1000px, which is where the mobile design ends and the desktop layout begins.

@media (width >= 1000px) {
  .container {
    margin-left: 0;
  }
}

I would also note that if you check your collection page, there is another bad selector and you are getting a horizontal scroll.

@media screen and (max-width: 699px) {
  .product-list:not(.product-list--carousel) {
    margin-inline: -.625rem;
  }
}

  This is in the theme.css file and what the css rule is doing is pulling the inline margin 10px to the left and 10px to the right essentially stretching it. This is also being applied to an element with a display of grid which is absolutely pointless and a wrong use of code. The reason the horizontal scroll is there is because the grid has been stretched past the width of the viewport. Looking further up the chain there is another rule, max-width: 100%; this is another false use case, the developer that did this tried to constrain the width of the grid to the viewport, albeit wrongly and then stretched a subgrid with the negative margin. This is also a hack that doesn't need to be used as it leads to weird css bugs.

Lastly when I look at the max-width: 100%; and margin: 0; there is the !important declaration again twice. This is absolutely a huge no no. There is also a css selector "@media screen and (max-width: 699px) {}", this is another small mistake, it isn't important and the code still works but anytime you want to target a certain viewport width, you don't need to specify "screen". "@media (max-width: 699px) {}" is the correct usage.