Changing product page width without affecting any other width settings

Store Design
1

How can I change the product page width without changing any other width settings? I changed the page width to 1600 px which I want to keep but it will make my product page to wide (first image).
I used the code below but it will make some strange changes to the entire side (image two).

{% if template == “product” %}

@media screen and (min-width: 768px) { .page-width { max-width: 1000px !important; } }

{% endif %}

This is how it looks without the code changes (to wide)

This is how it looks after the code changes (header and everything else is changed)

2

Hi, @Pah34H

You should not modify the style of page width separately, but need to modify the style of the intermediate product container. Just like below

{% if template == "product" %}
 

{% endif %}
3

The above code is unfortunately not working for me

4

Ok I found a solution:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

@media (min-width: 768px) { [id^=“MainProduct-template”] { --page-width: 1600px !important; } }