Rich Text Input Tip #1: Making It Responsive for Mobile

Tips
1

Title: Rich Text Input Tip #1: Making It Responsive for Mobile

Hi everyone! This is If-dev, a Bubble agency. :blush:

Today, I’d like to share a handy tip about one of Bubble’s most commonly used plugins: Rich Text Input (Bubble’s default plugin). While there are many rich text editor plugins available, there are times when the default plugin is the best choice due to its simplicity or compatibility. If that’s the case, this tip will be especially useful for you!

The Problem

When using the Rich Text Input, you may encounter several limitations:

  • It doesn’t support custom fonts from your Bubble project.
  • You can’t add alt tags for images.
  • Styling for block quotes, code sections, or other text elements is limited.

But one of the most frustrating challenges is the lack of responsive font sizes for mobile devices. By default, the font size remains fixed, making it difficult to ensure a clean mobile experience.

The Solution: CSS to the Rescue!

With a little CSS magic, you can control the font size and padding within the Rich Text Input, ensuring a better mobile experience. Here’s how:

Example Code

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #richtexteditor .ql-editor {
        padding: 0 1rem;
    }
    #richtexteditor .ql-editor h1 {
        font-size: 1.8em;
    }
    #richtexteditor .ql-editor h2 {
        font-size: 1.5em;
    }
    #richtexteditor .ql-editor h3 {
        font-size: 1.2em;
    }
    #richtexteditor .ql-editor pre.ql-syntax {
        padding: 10px 15px 10px 30px !important;
        font-size: 0.9em !important;
    }
}

What Does This Code Do?

  1. @media (max-width: 768px):
    This targets devices with a screen width of 768px or less, such as smartphones.

  2. Padding Adjustments:
    The padding for the .ql-editor is reduced to ensure the text fits well on smaller screens.

  3. Font Size (h1, h2, h3):

    • The em unit is used for font sizes because it scales proportionally with the parent element.
    • This ensures that headings look great on both mobile and desktop views.

  4. Code Blocks (pre.ql-syntax):

    • Adjusted padding and font size improve the readability of code blocks.
    • The !important declaration ensures these styles are applied, even if other rules conflict.

Why Does This Matter?

By applying these simple CSS rules, you can make the Rich Text Input behave responsively on mobile devices. This tiny tweak can significantly improve the user experience, especially for content-heavy apps.

If you’ve struggled with similar issues while using Bubble, give this solution a try! The more you experiment with plugins and CSS, the more you’ll realize how much flexibility Bubble offers. :blush:

Feel free to share your own tips or ask questions in the comments!

If-dev | :globe_with_meridians: If-dev.io | :e-mail: support@if-dev.io