Weird spacing with product card

I’m not sure if this is a theme glitch or Ghost glitch, but there is a weird alignment thing happening when I publish product cards.

The title is unusually far away from the image and no longer aligned with the stars.

I have no idea why this is happening. Any feedback?

Are you able to share one of your pages where this is occurring? It’s next to impossible to debug without being able to see the styles that are causing it

Sure. The site is still being developed so it’s behind a password. Here’s a page with the product card on it. If it asks you for a password, type in JW2024.

The problem is coming from the theme styling, specifically the Tailwind .prose class that’s added to the content area. It’s picking up the <p> that’s in the product card header and adding top+bottom margin to it. Typically you’d want to exclude any cards from being affected by general content styling.

Is this a theme you’ve developed yourself or a third party one? If it’s not your own theme I would suggest contacting the theme developer to see if they have a fix.

Give me more specifics and I’ll try fix it. I think it might have been me a few days ago when I was messing around with the theme. I can’t remember what I did though. Your guidance will help.

@Kevin Was it intentional to add <p> inside headings? This happens after the latest update and it wasn’t the case before. As far as I’m aware that is invalid according to HTML specifications, as block level elements shouldn’t be used in headings.

This is probably my bug. I’m chasing it down now. :(

Yep. My bug. My apologies to all. I’ve put in a PR that fixes it, will let you know an ETA on when it’ll available when I have one.

2 Likes

We’ve identified the issue and rolled it back.
Running ghost update should get you up to the latest version that includes the fix.

You may need to edit the post for the changes to rerender on your post.

Let us know if you run into any issues. :)

2 Likes