wagtail.org icon indicating copy to clipboard operation
wagtail.org copied to clipboard

Markdown block display issues

Open vossisboss opened this issue 2 years ago • 5 comments

The markdown block for our Blog page type isn't displaying properly with the new design. This block has been primarily used in older blogs but I have also used it recently for photo captions as well.

Here are some screenshots of the display issues from https://wagtail.org/blog/search-with-algolia/:

Screen Shot 2022-11-18 at 11 02 49 AM Screen Shot 2022-11-18 at 11 03 05 AM

And here is an example of a photo caption display issue from https://wagtail.org/blog/where-were-at-for-google-summer-of-code-2022/: Screen Shot 2022-11-18 at 11 08 23 AM

We need to have a look at the styling for the Markdown block and make sure it provides consistent spacing for the blog posts that use it.

vossisboss avatar Nov 18 '22 16:11 vossisboss

Would you mind if I tried working on this?

DokuaAsiedu avatar Nov 18 '22 18:11 DokuaAsiedu

Go for it @DokuaAsiedu !

vossisboss avatar Nov 19 '22 00:11 vossisboss

Go for it @DokuaAsiedu !

Alright thanks, will get right on in it

DokuaAsiedu avatar Nov 19 '22 07:11 DokuaAsiedu

The issue stems from the negative margin that comes with .grid-align, normally to account for child elements such as .rich-text--sf having a big bottom margin.

One solution would be to add a ~ 120px bottom margin for .codehilite

zerolab avatar Nov 22 '22 17:11 zerolab

Go for it @DokuaAsiedu !

Alright thanks, will get right on in it

@DokuaAsiedu you still working on it should i give it a go?

salty-ivy avatar Jan 07 '23 17:01 salty-ivy