[Bug]: Blocks icons & font size too small to read

Question

Hi,

I am using grapesjs webpage preset plugin to create the webpage builder. But as you can see the icons and font size of the blocks is too small. What could be the issue? They show perfectly fine in the demo here: https://grapesjs.com/demo.html see the size comparison from my local and demo.

artf · Accepted Answer

Just fix them with CSS

ahmeds63 · Answer

For some reason the problem was with embedding the GrapesJS editor within a form that was itself enclosed by bootstrap columns. So the space was tight and GrapesJS stylesheet is using rem font unit for fontawesome icons which sets the font size based on the window size. I rendered the GrapesJS on a full page without any bootstrap containers/columns it worked fine.

ahmeds63 · Answer

I am facing issue again with the icon sizes of three blocks check the screenshot. As you can see tooltip, custom code and typed have huge icons and they are not matching the normal size of other icons. <img width="254" alt="Screenshot 2020-03-02 at 12 54 47 PM" src="https://user-images.githubusercontent.com/11045156/75656113-19b63a00-5c85-11ea-9062-fa185cbcc5c5.png">

Blocks icons & font size too small to read

Question

Answers (3)

Related Questions and Answers

[BUG]: Some form components not working well with Preset Webpage Plugin

Too much recursion

editing/replacing the text inside of a link

Too many classes will cause the webpage to crash

Paid Plugins That Match This Issue

Browse Plugin Categories