Rezise columns under product page/overview - Stiletto theme

Store Design
, ,

Topic summary

Goal: Narrow the right-hand “product overview” column (product header, buy buttons, text list, related products) in the Stiletto theme to be tighter next to product images.

Key solution (implemented):

  • CSS in theme.css for desktop widths to constrain the meta column width:
    @media (min-width: 960px) { .product__meta { max-width: fit-content !important; } }
  • Result: Right-side column is narrower as desired.

Follow-up issues:

  1. Display 3 products per row (instead of 2) for product images/list. Response: Considered complex; would require extensive class/container changes and could break the prior fix. No code provided; remains unresolved.
  2. Unwanted horizontal scrolling on mobile due to “Related products.” Fix provided and confirmed:
    .product__details.product__primary-right { overflow-x: hidden !important; }
  • Result: Page no longer scrolls horizontally; only the related products area scrolls as intended.

Notes:

  • Images were provided to illustrate the current vs desired layout and the mobile scrolling behavior.

Status: Primary resizing request and mobile scroll issue resolved. Request to show 3 products per row remains open/unaddressed.

Summarized with AI on January 5. AI used: gpt-5.
1

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 3.png2535×1298 520 KB

NADA 2.png
NADA 2.png1905×1267 265 KB

2

Add this code in your theme.css file:

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

Result:

2.PNG
2.PNG1107×862 93.2 KB

1 Like
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
bild 122.png1417×1208 243 KB

  1. 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
image1.png1290×2796 568 KB

image3.png
image3.png1290×2796 400 KB

1 Like
4

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;
}
1 Like
5

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

1 Like