Product page images

Posted by: @adenmott

Good morning Plak. I noticed today that on my product pages, the images for the products are "stuck" so the sides of the browser window and they scale in size when you shrink or enlarge the browser. This scaling is great but is there any way to fix the images so they aren't stuck to the sides of the page?

Hi @adenmott

Thanks for the remark about the product page appearance issue on large screens.

Here is a quick fix to this :

• From your Shopify admin, click Online store > Actions > Edit code
• Open the file theme.css
• Change this code

.page-width {
max-width: 1400px;
margin: 0 auto;
padding-left: var(--gutter-site);
padding-right: var(--gutter-site); }

• To this one

.page-width {
max-width: 100%;
margin: 0 auto;
padding-left: var(--gutter-site);
padding-right: var(--gutter-site); }

• Click Save

Let me know if you have any other other issue

Best regards,
Katrine

Thank you Katrine. I tried that code but it did not fix the problem.  I am still seeing my product images and titles hugging the side of the browser window even when I expand or shrink the browser window.

@adenmott could you take a screenshot please? This will help spotting the issue

@plaktheme

Posted by: @adenmott

@plaktheme

 

oh I see now, thanks for the screenshot, I will access your store to fix this.

Posted by: @adenmott

@plaktheme

 

I fixed the issue, for some reason there was a typo in this code in the collection-template.liquid file

class="paginae-width"

Where it should be

class="page-width"

Don't hesitate to reach out to us if you encounter any other issue 🙂

Katrine

Thank you very much Katrine. I went back through my theme saves before I make any edits and can see which save caused it to occur but no idea how it happened because I wasn't editing that code. You are the best!