Flipped Image Card Block On Mobile - Ghost Plugin Fix

Hi! I'm using this code from ghost plugin to keep the image below the text on mobile view on my blog pages:

https://www.ghostplugins.com/steps/8eyhk58g

However, it's added extra space between the line and the start of the text (e.g., "Chapter 133") on mobile view.

You can see the desired amount of spacing between line and text on this earlier post that isn't using an image card:

https://www.themagicguide.co/chapter/132/ethereal-allele

I'm really hoping to fix this because using separate text and image blocks (versus the image card) creates terrible spacing on tablet.

Thank you!

I can't find Chapter 133, can you share link? 

Hello! Sorry about that! Here's chapter 133: https://www.themagicguide.co/chapter/133/ethereal-clockmaker

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
div.horizontalrule-block + .row .image-block svg {
    display: none;
}
div.horizontalrule-block + .row div.image-block.sqs-block {
    padding-top: 0px !important;
}
}

Thank you! For the most part, that solved it!

Two strange things:

1) It's not consistently fixing the problem. For instance, it's fixed on Ch. 133 and most of the other chapters, but on ch. 134 and 132 (which I've now switched to an image card), there is still the extra space above:

Fixed: https://www.themagicguide.co/chapter/133/ethereal-clockmaker
Not Fixed: https://www.themagicguide.co/chapter/134/the-scorpion-and-the-sage

2) Also, for some reason it changed the shape of the image on ch. 133 from a circle to a square on mobile. This isn't a huge deal and easy to resolve in other ways, but just thought I'd share this issue as well.

Thanks again!

On 4/28/2024 at 2:18 PM, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
div.horizontalrule-block + .row .image-block svg {
    display: none;
}
div.horizontalrule-block + .row div.image-block.sqs-block {
    padding-top: 0px !important;
}
}

 

Use this new code

@media screen and (max-width:767px) {
div.horizontalrule-block + .row .image-block svg {
    display: none;
}
    div.horizontalrule-block + .row .image-block .content-fit {
        border-radius: 50% !important;
    }
div.horizontalrule-block + .row div.image-block.sqs-block, div.horizontalrule-block + div.image-block.sqs-block {
    padding-top: 0px !important;
}
}