How to adjust Hight

Shopify Discussion

Topic summary

A user seeks help adjusting the height of a product recommendations section on their Shopify store, providing a screenshot showing the current layout.

Support Response:
The Avada support team requests the page URL for inspection, then provides three CSS code solutions after reviewing the product page:

  1. Height reduction only - Reduces section height to 250px but crops square images
  2. Width adjustment - Reduces image width to fit while maintaining aspect ratio, adds white background
  3. Recommended solution - Creates uniform 250px × 250px product cards, centers the grid, and applies only on desktop screens (min-width: 1024px)

All solutions target the product recommendations section with custom CSS. The support team recommends option 3 as most suitable and awaits user feedback on implementation.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello guys, how can I adjust the Hight of this section?

NikosBat_1-1736601613578.png
NikosBat_1-1736601613578.png1568×595 273 KB

2

Hi @NikosBat

Could you please share with us the link to that page so we can check it further?

Looking forward to hearing from you soon. Thank you!

Best,
Daisy - Avada Support Team.

3

Hello DaisyVo, its in the bottom of this product page: https://www.nistore.de/products/nistore%E2%84%A2-winterhandschuhe, nikthe

4

Hi @NikosBat

1/ Since the image is currently square, reducing only the height will result in the image being cropped: https://prnt.sc/RBsdKbHcRXyK

Here is the code for option 1:

product-recommendations h2.related-products__heading + ul.grid.product-grid li.grid__item .card__inner {
    height: 250px;
}

2/ If you want to reduce the width of the image to fit, you can use this code: https://prnt.sc/J6C00o3T0nYh

product-recommendations h2.related-products__heading + ul.grid.product-grid li.grid__item .card__media img {
    width: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
product-recommendations h2.related-products__heading + ul.grid.product-grid li.grid__item .card__inner {
    height: 250px;
    background: white !important;
}

3/ But I think this code is the most suitable: https://prnt.sc/y8bqfNBnJrkL

@media screen and (min-width: 1024px){
product-recommendations h2.related-products__heading + ul.grid.product-grid {
    justify-content: center !important;
}
product-recommendations h2.related-products__heading + ul.grid.product-grid li.grid__item {
    width: 250px !important;
    flex-grow: unset !important;
}
product-recommendations h2.related-products__heading + ul.grid.product-grid li.grid__item .card__inner {
    height: 250px;
    width: 250px !important;
}
product-recommendations h2.related-products__heading + ul.grid.product-grid li.grid__item .card-wrapper.product-card-wrapper {
    width: 250px !important;
}
product-recommendations h2.related-products__heading + ul.grid.product-grid li.grid__item .card-wrapper.product-card-wrapper .card {
    width: 250px !important;
}
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.