QUESTION: Adding default styling to a component

Question

I have been working on integrating grapesjs into a new development I'm working on. I have had much success with the documentation and wiki forum but am running into a few issues I'm hoping someone out there can help me with. I am working with a mobile view only, I have set the default device to mobile and hidden the option to change. When I insert an image, I would like the default css to include max-width: 100% as if I load a large image into the mobile view I will get an image much larger tha...

artf · Accepted Answer

Your change on the block doesn't work because you don't change the actual component (just the block's property) With cssComposer instead, by default, selectorManager accepts classes An easier way to add custom CSS might be this one But be careful, if store your templates and then run this command on any refresh this will continue to create styles. For default CSS I'd recommend:

mbleverage · Answer

Thank you! I was able to get that working with: protectedCss: 'img {max-width:100%;}', I have the same issue with videos and iframes (for youtube) being dropped onto the template larger than the screen size and the protectedCss solution did not work for those. Any suggestions?

artf · Answer

protectedCss is loaded so the CSS is here, if it doesn't work probably your CSS technique is not correct

Adding default styling to a component

Question

Answers (3)

Related Questions and Answers

[QUESTION] How to get the html and css code in view code tool?

[QUESTION] Add default Trait (attribute) to model for all HTML Components (elements)

[HELP WANTED]: questions about some customization.

[Question] Button staying pressed after running command

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories