3,464 parsed GitHub issues — 370 solved · 90 open. Search, filter and explore battle-tested answers.
71 issues found
🔍 mobileWhen I switch to the mobile view, the elements on the screen are just squeezed. (I am using the grapesjs-blocks-basic plugin) In the screenshots below, a have a column with 2 cells. I expect it to be converted to rows in the mobile view <br/> <hr/> <br> The code for the deviceManager is:
Ju99ernaut
Try using flexGrid
theSC0RP
@Ju99ernaut Thank you so much. Using flexGrid solves the issue.
Version: v0.16.22 Are you able to reproduce the bug from the demo? [X] Yes (Newsletter Demo) How to reproduce Export the default template or your own template (after you imported it) and send it using [](https://putsmail.com/). Open the mail on an iPhone. What is the expected behavior? When sent to a mobile device (in...
boomshakar
The workaround to this issue is setting the body to 100% width & height, then the email container itself should have a max-width of 550px and width of 100%, then height: auto and min-height: 100vh or 150px
artf
Hi @terdinatore the core of GrapesJS is about creating the editor for building stuff with HTML/CSS/JS, but building the right email blocks/components is up to who integrates the editor
In gjs-preset-webpage, in mobile mode, nested elements are superimposed on each other. but in grapes js demo everything is fine. what could be the problem? after a clean grapes js installation and adding gjs-preset-webpage: from https://grapesjs.com/demo.html:
Version: "0.16.18" Are you able to reproduce the bug from the demo? [ X] Yes [ ] No Steps to reproduce the bug in web builder demo: Open the demo and the console, enter editor.Canvas.addFrame({ name: 'Mobile home page', x: 100, // Position in canvas y: 100, width: 500, // Frame dimensions height: 600, // device: 'DEVI...
artf
Thanks @FlowingCloudRTL for the report but the multi-frame feature is still far from being complete so I'm not surprised about the issues. If anyone is interested in bringing this feature further, please let me know
Hi, i want to use showComputed: false, to prevent from counting right/left/top/bottom for position absolute. But when i'm initializing grapesjs with this parameter, style manager doesnt show css-prop values for tablet/mobile screen size: you can check it here https://codepen.io/makkaronis4e/pen/PoZjaXJ
artf
Steps to reproduce, please?
makkaronis4e
Drop some element on canvasAdd some styles (for example background color)Switch to tablet/mobile viewcheck style prop value in style manager (it will be default).
artf
Ah ok, now I get it. Unfortunately, to show a style of a different view is part of the showComputed feature, so disabling it is what you get.
Hi, have a problem with removing style property on selected device (clearProperties: true). You can reproduce the problem on https://grapesjs.com/demo.html. Steps:Clean everything.Drag custom code.Add this sample code.Switch devices to tablet or mobile and select the component.In the Typography style you can see that...
abozhinov
@artf do you have idea how can i fix it?
artf
To make the StyleManager read the proper style rule your media query should reflect the same width of the selected Device. Did you try it?
abozhinov
Yes I do it. deviceManager: { devices: [ { name: 'Desktop', width: '', priority: 3 }, { name: 'Tablet', width: '768px', widthMedia: '991px', priority: 2 }, { name: 'Mobile', width: '360px', height: '640px', widthMedia: '767px', priority: 1...
Hello, is it possible to create responsive websites? For example: A text should be smaller on mobile devices and bigger on desktop. How can I do that?
artf
Yes, you have to change the device
BerkeAras
But it does not make the website responsive. I mean, isn't it possible to just make text 15px for example on mobile and 20px on desktop?
artf
When you edit in a different view those changes are saved only for that current device
@artf I want to use the mode translate and absolute But there are some problems 1- Dropping is no longer possibleWhen I set the boxes on the devices (mobile and tablet), if the screen is a little bigger or smaller than the size of the device, there may be a problem with the output.
artf
Using the absolute mode, by design, is harder to deal with responsive pages
@artf When I click on the devices(tablet, mobile), the size of the canvas is not updated But it Worked in Version 0.15.x and lower.
cdespinosaagmx
I have the same issue
kuhelbeher
I had the same issue after grapejs update. In my case it turned out that I was using old version of css file: https://unpkg.com/[email protected]/dist/css/grapes.min.css I updated it to use version as grapesjs and it solved my problem. Try...
alitorki2651
I have the same issue @artf
I'm just trying the demo on my phone https://grapesjs.com/demo.html render of HTML/CSS https://us-central1-connectionhelper-6e7ed.cloudfunctions.net/app/api/pages and noticed that it still looks like the desktop version. When i'm in the editor and look at the mobile version it looks a bit different. Kind of confused w...
vinceumo
Hi @artf I did open an issue regarding mine with a codesandbox https://github.com/artf/grapesjs/issues/2774 My issue was actually more about style not being render correctly in the canvas. My issue above was actually on my side as it was m...
montali
I second this!
vinceumo
Same issue on 0.16.12, When importing CSS with media query most css in the media query get removed, but not all?? I tried with the postcss parser as well and same issue.