BUG: Device width is invalid by default

Question

Thanks for #3673

I have a new bug feedback.

Version:. 0.17.22

Are you able to reproduce the bug from the demo?

[* ] Yes
No

What is the expected behavior? I want the default to be the width of the mobile device, so I configured min-width priority, but only the mobile width is displayed by default on the select box, and the page width has not changed. I use editor.setDevice('Mobile'); Yes, but in the new page management, the new page is also the same, I continue to use this method is invalid, so I think there should be a better way to deal with it.

Describe the bug detailed

What is the current behavior?

Describe the bug detailed

Are you able to attach screenshots, screencasts or a live demo?

[* ] Yes (attach)
No

var editor = grapesjs.init({
       ...
       mediaCondition: 'min-width',
        
        deviceManager: {
          devices: [{
              name: 'Mobile',
              width: '375px', // this value will be used on canvas width
              widthMedia: '', // this value will be used in CSS @media
          },{
            name: 'Desktop',
            width: '', // default size
            widthMedia: '', // this value will be used in CSS @media
          }]
        },
...
})

Answers (1)

artf• August 13, 20210 reactions

Yeah, you're right, actually, there is no option to select the default device... For now, as a workaround, do it manually after init:

const editor = grapesjs.init({...});
editor.setDevice('Mobile');

And as you're using the mobile-first approach, you would need to fix your Desktop device:

{
  name: 'Desktop',
  width: '', // default size
  widthMedia: '376px', // Tells the editor which media to apply for bigger screens
}

In the next release, I'll add the default option in the device manager configuration

deviceManager: {
          // The device `id` to select on start, if not indicated, the first available from `devices` will be used.
          default: 'Mobile',
          devices: [...],
},

BUG: Device width is invalid by default

Question

Answers (1)

Related Questions and Answers

BUG: When in preview mode, the toolbar is only being hidden but still clickable

BUG: the blue outline (gjs-hovered) is not following its parent during scrolling

BUG: `setStyle` & `setComponents` options parameter not taken into account

BUG: dragging components in preview mode enables editor mode

Paid Plugins That Match This Issue

Browse Plugin Categories