splitbee/react-notion

Images are overflowing

YeonjuSeo opened this issue · 2 comments

I'm trying to render one notion page.
Font size is fine but the images are getting bigger than the wrapper and the layout isn't working properly. I don't know what to do Plz help me.

This is the notion page:
image

And this is the react-notion page:
스크린샷 2021-08-04 19 08 36

image

This is my code:

<StyledNotionWrapper>
{isNotionContent && <NotionRenderer blockMap={notionData} />}
</StyledNotionWrapper>

const StyledNotionWrapper = styled.div`
	width: 792px;
	max-width: 792px;
	font-size: 0.2rem;
`;

These CSS classes fixed the issue for me @YeonjuSeo :

.notion,
.notion img,
.notion-asset-wrapper {
  max-width: 100%;
}
.notion-asset-wrapper > div {
  padding-bottom: 0 !important;
}

Oh god Thank you so much!! It worked for me!!