Bullet CSS Bugs & Fixes

TLDR;

/* Fix Toggle Blocks Overflow*/
.notion-text, .blog_page_content .notion-text, .notion-list-numbered, .notion-list li {
    max-width: 100%;
 }
 
 /* Fix YouTube Embed Under Toggle Block */
.notion-toggle .notion-asset-wrapper-video .notion-yt-lite {
  padding-bottom: 50%;
}

/* Fix Blog Tag Color Property */
a.blog-tags[data-tag-color="red"], 
.blog-thumbnail .tagLeft[data-tag-color="red"] {
  background-color: red;
}
a.blog-tags[data-tag-color="blue"], 
.blog-thumbnail .tagLeft[data-tag-color="blue"] {
  background-color: blue;
}

Toggle Blocks

Basic - Overflowing Toggle Block

This bug occurs across all screen sizes.

See samples of the same bug on other screen sizes.

Mobile(Iphone XR)

Tablet(Ipad Air)

.notion-list-numbered {
    ...
    padding-inline-start: 1.6em;
}

Read Full Debug Story

But when I adjust the max-width solely based on the padding mentioned above, we get this result:

So, I include one more subtraction, producing this result:

Wondering why I chose 17%?

Of course, it’s not random.

I was wondering where the extra padding on the sides of the list came from. I eventually found a width of 84% had been applied to the page via .blog-main.

For this reason, I chose to remove 16%(100-84) and an extra 1%(clearance) from the max-width calculation. Here’s the current CSS code:

.notion-list .notion-toggle {
		max-width: calc(100vw - 17% - 1.6em);
}

After I did this, I observed two things:

1. the lists themselves were overflowing and

2. The fix above ruined the toggle block in some cases.

Then I realised that I could simply kill two birds with one stone 🤩

So with one stone or one line of code, I solved two problems. Here’s the code:

.notion-text, .blog_page_content .notion-text, .notion-list-numbered, .notion-list li {
    max-width: calc(100vw - 16% - 1.2em);
 }

Why this works?

Here’s a hint:

Remember this?

.blog-main {
		width: 84%
}

Well, the problem wasn’t actually from the toggle block but from the list and text. So the fix I applied adjusts all of them at once.

• 16% (I explained this earlier).

• The additional 1.2em is in consideration of the padding-inline-start of 1.6em. When I tried to use 1.6em, it appeared a bit much in some cases, 1.2em seems to work fine on all screen sizes below 768px.

The result:

 

Screen sizes above 768 px?

I’m sure many of us, “CSS-ers” can relate to this particular story.

While trying to tweak the max-width for larger screens, I calculated for various factors:

• Brown sections: This was about 16% of the page width, due to the 84% width of .blog-main mentioned earlier.

• Left Blue section: A grid template column of 1fr 3fr was applied to section the table of contents and main text body. That accounts for 25% of …

Then I realised 🤔 … I can’t do max-width: calc(100vw - 16% - 25%...The 25% doesn’t apply to the full page width, but the inner container.

Then I just randomly tried this. I got the idea from the fact that normal toggle blocks (not within a list) look fine (they had a max-width of 100%).

.notion-text, .blog_page_content .notion-text, .notion-list-numbered, .notion-list li {
    max-width: 100%;
 }

To my greatest surprise 🤯, this even simpler piece of code fixes the issue for all screen sizes(mobile, tablet, pc). Honestly, I initially had no idea why this works, but as they say - If it works, don’t change it.

After a bit of digging, I discovered a few things:

• There’s a lot of containing divs for the page with their width or max-width in percentages.

• Then finally the main page has a fixed max-width depending on the screen size.

So, I imagine my fix works because it restricts the width of the text and list blocks to 100% of the available width, instead of allowing overflow.

.notion-text, .blog_page_content .notion-text, .notion-list-numbered, .notion-list li {
    max-width: 100%;
 }

Advanced - Video embedded under Toggle Block

.notion-toggle .notion-asset-wrapper-video div {
    height: fit-content !important;
}

Read Full Story

.notion-toggle .notion-asset-wrapper-video div {
    height: fit-content !important;
}

If you inspect the <iframe/>, you would see that it has a height of 0, so the height property applied to the containing div has nothing to fit inside it.

But magically— if I disable height property, the video appears ✨.

Well it worked there, but look at this:

Can you figure out what’s wrong and the correct fix?

See Answer

Well, the <div> element has a fixed height this time.

So I disabled it and…

Well, where’d the video go? 👀

Turns out that height property was actually important. So, what do u think is the fix here?

1. Apply a new height property (there’s no classes directly applied on our target div)

.notion-toggle .notion-asset-wrapper-video div {
  height: 0px !important;
  }

This does 2 things:

• It ensures that any height property used in the <style> tag is overridden.

• Effectively wipes out the videos anyway 😆.

So, can you figure out the solution yourself now? 😏

2. Magic ingredient?

In the final image from step 1, you’d observe something odd, the first toggle block seems to have some height despite the absence of the video.

Do you know why?

Well, you can see the two CSS lines cancelled out below are the culprits.

Does that give an idea of a possible solution?

Well the solution is quite simple. We need to apply these properties to all divs that are children of .notion-toggle .notion-asset-wrapper-video.

.notion-toggle .notion-asset-wrapper-video div {
  height: 0px !important;
  padding-bottom: 50%;
 }

Why this works?

We don’t know the height of the video, but the width is usually fixed and padding-bottom applies its percentages in terms of the width of the containing block.

You can see that the iframe element has a width here despite being empty:

Aren’t you wondering why this didn’t work here:

I mean there’s a padding-bottom property applied to the div element, although it’s in a style tag. height: 0 !important is equally applied.

So why doesn’t the video display?

To answer this, I’d like you to compare the screenshot above to this below:

Observe anything?

Yes, you got it! The inner div still had 0 height as it had a padding-bottom of 0.

So, all we have to do is apply padding-bottom: 50% to this div too. That’s why the recommended fix works perfectly. It effectively solves the issue with just two lines of CSS.

Skip to Final & Recommended Fix at this point

.notion-toggle .notion-asset-wrapper-video div {
  height: 0px !important;
  padding-bottom: 50%;
}

Note: As of writing, this has only been tested for the case where a landscape(2:1) YouTube video is embedded under a Toggle Block. See sample.

A Twist?

After doing all that, I go ahead and upload this video, and then…

Well, fixing this turned out to be quite easy. I had initially thought there were no CSS classes to target embedded youtube videos with CSS.

But it turns out there is…

.notion-toggle .notion-asset-wrapper-video .notion-yt-lite {
    padding-bottom: 50%;
}

I also got to learn that there was no difference between height: 0px and height: fit-content in our use-case (since the youtube embed had no height).

So, just padding-bottom: 50%; was enough to fix the bug afterall. Embedded Notion videos didn’t need fixing.

.notion-toggle .notion-asset-wrapper-video .notion-yt-lite {
    padding-bottom: 50%;
}

Tags

/* Blog Tags */
a.blog-tags[data-tag-color="red"], 
.blog-thumbnail .tagLeft[data-tag-color="red"] {
  background-color: red;
}
a.blog-tags[data-tag-color="blue"], 
.blog-thumbnail .tagLeft[data-tag-color="blue"] {
  background-color: blue;
}

Images

Advanced Image Attribute

:link=”https://notion.so” :alt=”Advanced Image Attributes Sample” :height=”320px”

Alternative Means

• To add caption, follow the same process as outlined above.

• For width and height, its best to simply resize the image in Notion.

Italics - fonts

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Salsa&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet">

Spicy Shortcuts 😋

• CTRL + F – Quickly search for specific code. Super useful when you need to locate something fast.

• ALT + Up/Down Arrow Keys – Move the current line (or selected lines) up or down. Perfect for rearranging content easily.

• SHIFT + Up/Down Arrow Keys – Highlight one line at a time, allowing you to select text incrementally using the arrow keys.

Other Bugs

• We can uncheck Publish for blog posts. It doesn’t show up on the Blog page, but the articles still appears on the home page. I’m unable to open the post from there but it does look odd.

Mobile Responsiveness

• Subscribe to the newsletter(Be my first subscriber🤭) or

• Follow me on X.

• How to set up free analytics for your bullet site.

• How I built my Portfolio.