How can I make the boxes for the blog posts to be equal?

Store Design
,

Topic summary

A user is experiencing unequal height boxes for blog post cards on their Shopify store (lonitacosmetics.com/blogs/body). The issue is visible in an attached screenshot showing misaligned card containers.

Proposed Solutions:

  • CSS Fix: Add .card__inner { height: 100%; } to the base.css file to force equal heights across all blog post cards
  • Alternative Approach: GemPages Support Team suggests editing the theme code by pasting specific markup before the </head> tag in the theme.liquid file

Both solutions aim to standardize the card container heights. The discussion remains open pending confirmation of which solution works for the user.

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

Hello!

The boxes of the blog posts aren’t equal. I attached a picture.

I would appreciate any help, Thanks!

Screenshot (1).png
Screenshot (1).png2028×928 299 KB

2

@Alexandra219 Can you share your store url?

1 Like
3

Sure, @Ujjaval

https://lonitacosmetics.com/blogs/body

4

@Alexandra219
Add below css into base.css

.card__inner {
    height: 100%;
}

Ujjaval_0-1678804538593.png
Ujjaval_0-1678804538593.png1600×795 257 KB

1 Like
5

Hello @Alexandra219 ,

It’s the GemPages Support Team and we are glad to assist you today!

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

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1678844449854.png
GemPages_0-1678844449854.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team