Issue #2579Opened February 18, 2020by ahmeds633 reactions

[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.

<img width="233" alt="Screenshot 2020-02-18 at 11 46 33 AM" src="https://user-images.githubusercontent.com/11045156/74710810-570dd700-5244-11ea-9a03-a21c1348db8e.png"> <img width="256" alt="Screenshot 2020-02-18 at 12 00 08 PM" src="https://user-images.githubusercontent.com/11045156/74711619-42324300-5246-11ea-8f86-8ed26d51416e.png">

Answers (3)

artfMarch 3, 20203 reactions

Just fix them with CSS

ahmeds63February 24, 20200 reactions

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.

ahmeds63March 2, 20200 reactions

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">

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.