search

wagtail / wagtail.org

Wagtail’s official marketing website
https://wagtail.org/
66 stars 60 forks source link

Markdown block display issues #344

Open vossisboss opened 1 year ago

vossisboss commented 1 year ago

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.

DokuaAsiedu commented 1 year ago

Would you mind if I tried working on this?

vossisboss commented 1 year ago

Go for it @DokuaAsiedu !

DokuaAsiedu commented 1 year ago

Go for it @DokuaAsiedu !

Alright thanks, will get right on in it

zerolab commented 1 year ago

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

salty-ivy commented 1 year ago

Go for it @DokuaAsiedu !

Alright thanks, will get right on in it

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