Issue #859Opened February 12, 2018by hibuno2 reactions
outdated

[QUESTIONS] Change canvas style

Question

Hi there,

I have some question about canvas style, in this case i have config like this.

var editor = grapesjs.init({
    container : '#gjs',
    canvas: {
        styles: ['/builder/css/builder-desktop.css']
    }
})

By default i use css with name builder-desktop.css for default canvas style. And then i want if i change Device Manager and choose mobile, i can change a canvas style to builder-mobile.css.

Thank you very much

Answers (2)

hibuno• February 12, 20182 reactions

Hi there,

Forget it i solve this problem, just add event on change like this.

  editor.on('change:device', function(e) {
    if (e.attributes.device !== 'Desktop') {
      editor.setStyle('/builder/css/builder-mobile.css')
    } else {
      editor.setStyle('/builder/css/builder-desktop.css')
    }
  });

Thank you

lock[bot]• September 18, 20190 reactions

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Issue #519

No Blocks by default

Using this code I get an editor but there are no blocks. I also do not get the icons for the screen size but other icons are there. As you...

3 answersUpdated September 18, 2019

Issue #1875

[QUESTION] ID changes when importing html or passing html in components prop in config.

Hi, I built a component and block that I can drag and drop in the canvas. My issue is that some styles rely on the ID. I know this might no...

3 answersUpdated May 6, 2020

Issue #1215

[Question]Adding Google Font doesn't work

Bonjour, I try to add Google Font : When i click on Typography, script stop in Grapes.jp show: function show() { this.$el.addClass(this.pfx...

3 answersUpdated September 17, 2019

Issue #1807

GrapeJs framework breaks on adding external stylesheet

When i add my external stylesheet using the grapesjs framework no more works. How can I have the style sheet as well as the grapesjs framew...

2 answersUpdated February 21, 2020

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.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders