Empty space on product page

Hi all,

Just created a new product page template to find the bundle product has a large unexplained space present ONLY ON THE MOBILE LAYOUT (as pictured).

Could someone please help me remove this? Thanks.

Page is:

https://celsiusmedicinals.com/products/vitality-pack

Hello @Lawson_1

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media (max-width: 767px){ .product-benefits { min-height: unset !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

HI @Lawson_1

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag
@media screen and (max-width: 434px) {
  .product-benefits {
    min-height: min-content;
}
}

Result:

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

Check This Code Put on Your base.css File.

@media screen and (max-width: 434px){
	.product__info-container .product-benefits {
	    min-height: auto;
	}
}