How to make my product bordering the same size

Store Design
, ,
1

Currently using the drop theme, I have descriptions varying in length due to the name of the product title. Currently its not aesthetic, as the bordering surrounding my image is not the same size, causing one to be more up or down.

Is there a way to fix this? To have it so that each carousel of products are the same size?

Screen Shot 2022-12-13 at 8.09.12 PM.png
Screen Shot 2022-12-13 at 8.09.12 PM.png2560×1600 416 KB

As you can see the left product is longer in length than the other two. Is there a way to make sure that each product is the same size as the 1st product?

Store URL - https://cvrtla.com

Store Pass - CVRTLAFAM

2

@CVRTLA
Can you please share your store url ?

3

Hello @CVRTLA

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

4

@GemPages @ZestardTech

Store URL - https://cvrtla.com

Store Pass - CVRTLAFAM

5

Posted on the thread now. Thank you

6

@CVRTLA
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.css.
Step 3: Paste the below code at bottom of the file → Save

.product-loop__info-wrapper {
    height: calc(100% - 430px);
}
7

Hello there,

1.In your Shopify Admin go to online store > themes > actions > edit code

2.Find Asset >theme.css and paste this at the bottom of the file:

.product-loop__info-wrapper.pt4.pb4.px4.sm-pt2.sm-pb2.sm-px2.a-left p.product-loop__title.h4 {
    min-height: 48px;
}

ZestardTech_0-1670997557151.png
ZestardTech_0-1670997557151.png1904×849 190 KB

8

@Rajvi_patel_1 So it worked on the overall product page. But on my best sellers collection, it still has the occurring problem. I left in the code for a reference, so its visible on site.

9

You can follow these steps:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste below code before :

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

10

@CVRTLA
Please remove above css and try with this one.

.product-loop__info-wrapper {
    height: calc(100% - 410px);
    min-height: 182px;
}
11

@ZestardTech @GemPages @Rajvi_patel_1 Unfortunately neither of these works, it seems that it edits the main product page, but not the collection slider.