Rezise columns under product page/overview - Stiletto theme

Solved

Rezise columns under product page/overview - Stiletto theme

Naweed
Tourist
5 0 3

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.

 

 

NADA 3.png

 

NADA 2.png

Accepted Solutions (2)

Spac-es
Shopify Partner
389 112 135

This is an accepted solution.

Add this code in your theme.css file:

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

Result:2.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Spac-es
Shopify Partner
389 112 135

This is an 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;
}

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 4 (4)

Spac-es
Shopify Partner
389 112 135

This is an accepted solution.

Add this code in your theme.css file:

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

Result:2.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Naweed
Tourist
5 0 3

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? 

 

bild 122.png

 

 

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.)

 

image1.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

image3.png

 

Spac-es
Shopify Partner
389 112 135

This is an 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;
}

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Naweed
Tourist
5 0 3

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