HTML Output Display Behaviour

[conradlin]

I found an issue with your HTML output, it contains max-width: calc((100vw - 0px) - 192px); , which will make it display badly on mobile. You can see this in your demo site. Do you have any ideas how I can parse out the specific style in the plugin?

Thanks!

https://files.slack.com/files-pri/TEPE1V8MU-FSM0N4V0R/image.png

[mayneyao]

You can add some code to fix this when fetch html using puppeteer. after this line https://github.com/mayneyao/gatsby-source-notion-database/blob/master/src/getPageHtml.js#L85

document.querySelectorAll(`div[data-block-id]`).forEach(block=>{
    block.style.maxWidth=""
})

or override css, just like this https://github.com/mayneyao/gine-blog/blob/master/src/index.css#L98-L100

div[data-block-id] {
 max-width: '100%!important'
}

[conradlin]

Thank you so much! I took the second route. 👍