Empty space on product page

Store Design
, , ,
1

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

IMG_2892.PNG
IMG_2892.PNG1125×2436 265 KB

Could someone please help me remove this? Thanks.

Page is:

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

2

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; } }

techlyser_web_0-1711172193900.png
techlyser_web_0-1711172193900.png316×317 17 KB

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

3

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:

LuffyOnePiece_0-1711172463868.png
LuffyOnePiece_0-1711172463868.png427×852 52.4 KB

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

4

Check This Code Put on Your base.css File.

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