How can I uniformly position product titles on my webpage?

Shopify Discussion
1

How do i make the positioning of every product title the same position on the page? Right now it is not even one is too high.

store url: https://c1e46d.myshopify.com/collections/all

position.png
position.png828×613 109 KB

2

Hi [email removed]Suoshie,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file component-card.css.

Step 3: Paste the below code at bottom of the file → Save

.card--card, .card--standard .card__inner{
height:250px !important;
overflow:hidden
}

PageFlyVictor_0-1675907449388.png
PageFlyVictor_0-1675907449388.png1259×393 130 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

3

Hello @suoshie

I would like to give you the recommendation to support you so kindly follow steps below:

  1. Go to your Online store > Themes > Edit code
  2. Open your theme.liquid file
  3. Paste the below code before

I hope the above is useful to you.
Best regards,
GemPages Support Team

4

THANK YOU! IT WORKED :heart:

5

Actually i am looking at mobile version and the product images are weirdly cropped. Can you help me fix this mobile problem?

6

unfortunately this dosent work.

7

here is the shop preview link: https://hx76tt6klxtrgyaf-71160791356.shopifypreview.com

Please help me fix the images on mobile so that they arent cropped. Thank u.

8

You can add

@media(max-width:767px){
.card--card, .card--standard .card__inner{
height:180px !important;
overflow:unset
}
}

PageFlyVictor_0-1676076236065.png
PageFlyVictor_0-1676076236065.png744×1332 129 KB

1 Like
9

that worked thank you. How do i make the stock photos smaller so they dont get cropped?

10

You can try

@media screen and (max-width: 749px){
.card__badge.top span img {
transform: translateY(-10px);
max-width:70px !important
}
}