-
Posts
7 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by Virginia77
-
-
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-sage2) 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!
-
Hello! Sorry about that! Here's chapter 133: https://www.themagicguide.co/chapter/133/ethereal-clockmaker
-
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!
Flipped Image Card Block On Mobile - Ghost Plugin Fix
in Customize with code
Posted
Thank you again! This additional code for the padding-top fixed the inconsistency with the top padding.
I didn't end up using the border-radius code because while it did make the image a circle on chapter 133, it also affected the other chapters (which have square images). This part isn't a big deal to me, so at this point I'm happy with the code, but if you discover a way to maintain the image shape design on mobile while using this code, then I welcome the support!
Thanks again for all your help! You are such an incredible resource for us here in the Squarespace community.
For anyone else who may see this, this is the final code I used that worked for me:
@media screen and (max-width:767px) { div.horizontalrule-block + .row .image-block svg { display: none; } div.horizontalrule-block + .row div.image-block.sqs-block, div.horizontalrule-block + div.image-block.sqs-block { padding-top: 0px !important; } }