How can I change the width of the section or the page width?

Store Design
, , , ,
1

Hello there

I made a product page but the product image is appearing way too big on the desktop. On mobile, it looks good.

https://propel-the-world.com/products/vegan-t-shirts-leaf?variant=42288001155269

For the desktop, I want to reduce the width of the image as the screenshot below(the blue line) remaining the ratio of the images.

Can I know how to do this?

스크린샷 2023-08-08 165432.png
스크린샷 2023-08-08 165432.png1899×919 104 KB

2

Please go to Online store → themes → Edit theme → Assets → base.css and paste this code at the end of this file

.shopify-section.slideshow {
    max-width: 1303px;
    margin: 0 auto;
}
3

Hey @propel

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 tag

RESULT:

Moeed_0-1692273707024.png
Moeed_0-1692273707024.png1906×935 104 KB

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

Best Regards,
Moeed

4

Thank you @Moeed . Your solution works but it is also changing the homepage.

propel_0-1692319378805.png
propel_0-1692319378805.png1914×829 252 KB

And the changed width of the image isn’t the same as the element above. Can you tell me the other solution?

propel_1-1692319518347.png
propel_1-1692319518347.png954×713 89.3 KB

5

Thanks, @Hardik29418

I can’t find the base.css file. Is there an alternative? Also, I want the change to be adjusted only to the product page. Is this possible?

6

@propel Yes, Making the adjustment only on the products page is possible.
Please go to Online store → themes → Edit theme → Layout → theme.liquid and paste this code before 

{% if template.name == 'product' %}

{% endif %}