Change container size for all product pages?

Is it possible to change the container for a group of page, in my case, all the product detail pages?

i can't seem to figure it out looking at the css. 

I found the  main content and correct width parameter to use, but it's applied site wide.

Thanks for any help

Depends templates

but almost product detail page has class: .collection-type-products.view-item or .collection-type-product.view-item

.collection-type-product.view-item your class {CSS}

@tuanphan

Thanks. I can't seem to get it to work, but again, I'm learning about CSS as i go. I've tried:

.collection-type-product.view-item.content-outer {
   position: relative;
  width: 90% !important;
  margin: auto;
  }

For the moment I've got the intended look by individually effecting the 3 elements within the container. It would be nice to know how to do this properly in case in future I have more than just a handful of elements.

https://shop.jonathan-gallagher.com/photo/001-premium

pw: jonjonjon

spacing

.collection-type-products.view-item .content-outer

Thank you. I had already tried with or without a space, as I'm not sure which it is. But sadly it didn't work, I guess the subject I'm pointing trying to point to goes under a different name :S

1 minute ago, JonJonJon said:

Thank you. I had already tried with or without a space, as I'm not sure which it is. But sadly it didn't work, I guess the subject I'm pointing trying to point to goes under a different name :S

What do you want to achieve?

Page content width?

If yes, use

.collection-type-products.view-item .Main-content {
    max-width: 50%;
}

That works, but you're right, I guess maybe I'm looking at this the wrong way. In a nutshell, I am trying to restrict the size of my product image on desktops. Seeing the product large is important, as it's a print.  So essentially a max-height

This way the container size restriction doesn't mess with the aesthetics of alignment with elements outside of the container.

I've managed to implement this. However there is a problem.

- The product page is divided by a ratio, 60% to 40%, towards the image. This doesn't change unless specified by breakpoints. Meaning that the width of the container as a whole stops when the image area reaches the designated max-height. 

Is there a way to make this ratio dynamic? or override/disable it at a certain point? Whatever allows the container to still grow even after the image has reached a max height.

In summary:

Once image hits e.g 900px, ProductItem-Gallery width dynamically goes from 60% down to 50%, where 50px is once the site max width is reached (1800px)

The alternative is making a breakpoint, it just looks pretty jarring on a desktop.

My basic solution. not an elegant solution, but it'll do. I'll have to see what it looks like on other monitors.

@media screen and (min-width:1650px) {
.ProductItem-gallery {
  width: 50%;
}
  .ProductItem-details {
    width: 50%;
  }
}