How to correct the product info cut-off issue on Colorluzes?

Store Design
, ,

Topic summary

A user encountered a layout issue on their Colorluzes store where product information was being cut off due to problematic margins on the collection page.

Initial Problem:

  • Product details were truncated/not fully visible
  • Issue appeared to be related to CSS styling of product items

Solution Provided:
Community members suggested adding custom CSS code to the assets/theme.css file, specifically:

  • Adjusting padding-bottom for .product-item--vertical .product-item__info
  • Setting min-height: max-content for scrollable product lists on screens wider than 1000px

Follow-up Request:
After the initial fix resolved the cut-off issue, the original poster asked about adding rounded edges to the product items. A second CSS solution was provided targeting the .flickity-slider elements with additional styling for margins, heights, and flexbox layout.

Status: The main cut-off issue was resolved; rounded edges solution was offered but implementation confirmation is pending.

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

The buggy margin of the products is cutting the product information, does anyone know how to solve it?

website: www.colorluzes.com.br

1.png
1.png1576×524 343 KB

2

Hi @GustavoAlves

I am not sure.

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/theme.css
  3. Add code below to bottom of file
.product-item--vertical .product-item__info {
  padding-bottom: 30px;
}
1 Like
3

@GustavoAlves

Please add the following CSS code to your assets/theme.css bottom of the file.

@media screen and (min-width: 1000px){
.product-list--scrollable .product-item {
    min-height: max-content !important;
}
}

Thanks!

1 Like
4

fixed my problem, but do you know if there is a way to make the edges rounded too? @EBOOST

GustavoAlves_0-1673270708480.png
GustavoAlves_0-1673270708480.png1460×485 275 KB

5

Hi @GustavoAlves

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/theme.css
  3. Add code below to bottom of file
.flickity-slider .product-item--vertical .product-item__info {
	padding-bottom: 0;
}
.flickity-slider .product-item--vertical .product-item__info .product-item__info-inner {
	display: flex;
    flex-flow: column;
}
.flickity-slider .product-item--vertical .product-item__info .product-item__info-inner .product-item__price-list {
	margin-top:0;
	margin-bottom: 0; 
}
.flickity-slider .product-item--vertical .product-item__info .product-item__info-inner .product-item__price-list .price {
	margin-bottom: 0;
}
.flickity-slider .product-item--vertical .product-item__info .product-item__info-inner .scm-reviews-rate {
	margin-bottom: 0;
	min-height: 26px;
}
.flickity-slider .product-item--vertical .product-item__info .product-item__info-inner .scm-reviews-rate + p {
	margin: 0!important;
	min-height: 24px;
}