Learn how Super.so adapts Notion pages for the web and how to maintain your original design.
If you’ve ever published a Notion page using Super.so, you might have noticed that it doesn’t look exactly like it does inside Notion. Don’t worry, this is normal! Here’s a simple explanation of why this happens and what you can do about it.
1. Notion vs. Super.so: Two Different Platforms
Notion is a productivity app designed for personal use and collaboration. Super.so, on the other hand, is a tool that turns your Notion pages into a public website.
While Super.so pulls content from Notion, it also applies its own website styling. This means fonts, spacing, colors, and layouts may look slightly different than in Notion. Think of it like moving furniture from your home into a hotel room, the items are the same, but the surroundings change.
2. Layout and Styling Changes
Notion pages often have flexible layouts like columns, toggles, and tables. When these pages are published on Super.so:
- Columns and grids may appear wider or narrower.
- Font sizes may change to match web standards.
- Spacing between elements may adjust to fit different screen sizes.
This is done to make your page mobile-friendly and easier to read on the web.
3. Interactive Elements May Behave Differently
Some features in Notion, like inline databases, linked databases, or certain embeds, may not work exactly the same on Super.so. For example:
- Filters and sorting on databases is not supported so it won't show on your live site. You have to pre-filtered this by adding a Database Views.
- Toggles may automatically open or close depending on your settings.
- Some embeds may require special links to display properly.
Super.so tries to preserve functionality, but web limitations sometimes change the behavior.
4. Customization on Super.so
The good news is that Super.so allows you to style your Notion page further:
- Themes: Choose light or dark themes.
- Custom fonts and colors: Adjust headings, text, and backgrounds.
- Custom CSS: Advanced users can tweak the appearance to closely match the original Notion page.
With these tools, you can make your page look more like it does in Notion while still benefiting from the web-friendly layout.
5. Tips to Make Your Page Look Consistent
- Keep it simple: Fewer columns and complex blocks translate better to the web.
- Preview before publishing: Super.so has a live preview so you can see how changes look.
- Use web-friendly fonts: Notion-only fonts may not render the same online.
- Test on different devices: Check desktop and mobile views to ensure your page looks good everywhere.
Conclusion
Your Notion page looks different on Super.so because the platform needs to adapt Notion’s design for the web. While some visual differences are unavoidable, you can still make your page look professional and readable with Super.so’s customization options.
Publishing your Notion page to the web doesn’t mean losing your style, it just means adjusting it for the online world.