Rezise columns under product page/overview - Stiletto theme

[Naweed]

I use the Stiletto theme.

I would like to resize all the columns to the right of the product images.
Would like it tighter/narrower.
All blocks under "product overview" such as Product header, buy buttons, Text list, related products.

Does anyone know how I can get it changed?
Homepage url: https://137c07-2.myshopify.com/

I use the Stiletto theme.

I would like to resize all the columns to the right of the product images.
Would like it tighter/narrower.
All blocks under "product overview" such as Product header, buy buttons, Text list, related products.

Does anyone know how I can get it changed?
Homepage url: https://137c07-2.myshopify.com/

Please see the pictures of how I would like it approximately.
First picture is the theme right now and second is how I would like and have it.

[Spac-es · Accepted solution]

Add this code in your theme.css file:

@media (min-width: 960px) {
  .product__meta {
    max-width: fit-content !important;
  }
}

Result:

[Spac-es · Accepted solution]

Add this code in your theme.css file:

@media (min-width: 960px) {
  .product__meta {
    max-width: fit-content !important;
  }
}

Result:

[Naweed]

You are absolutely amazing.
Many thanks for your help. Worked perfectly!

I have two more questions if you or anyone else would have time?

1. Can I make the product images and show 3 products next to each other instead of 2? 

2. Via the mobile phone, you can scroll the entire product page to the right, due to "related products".
The product page itself can be scrolled to the right even though it is empty above and below "related products", on the far right.
I would like the product page to lock to the mobile version and that you can then scroll around "Related products" without scrolling the entire website. (Hard to describe but see the pictures to get better understanding.)

[Spac-es · Accepted solution]

I'm glad it worked for you!

As for your two questions, the first one is more complex than I initially thought. It would require adjusting many classes and HTML containers, as otherwise, the code from the previous solution would cease to function properly. I'm sorry I can't assist you with that matter.

However, for the issue you mentioned about blocking horizontal scrolling on the x-axis to prevent that white space, there is a simple solution. Add the following code to your theme.css file:

.product__details.product__primary-right {
  overflow-x: hidden !important;
}

[Naweed]

Thanks again, that code also worked perfectly.😊 You are the best!