| Home | Development | API | Data format | github project |
For mobile styling, there are 2 typical ways:
dmeditor-view-mobile as css class filteruseGetDevice for custom rendering.We recommand trying to use way 1), because it’s better for performance, but sometimes way 2) is almost the only way(eg. move image to top of the widget in mobile if it’s hard only using css).
Hook useGetDevice from dmeditor/utils can be used to detect mode. Returns ‘mobile’|’tablet’|’’
Below css variables are for css calc function only.
| variable | Description |
|---|---|
| dme-main-width | DMEditor’s root element in pixel |
| dme-container-width | Width of DM Editor’s ‘container’, used for eg. setting full screen. By default it’s 100vw, but if you want to embed full screen image to another container, change this variable in css of that container. |
| class | Description |
|---|---|
| dmeditor-view | Root class for viewing |
| dmeditor-view-mobile | Mobile view |
| dmeditor-view-tablet | Tablet view |
| dme-block-container | container div for a block element |
| inblock | Same level as block-container, if the widget is embed in other widget, this class will be added to .block-container |
| dme-block | Block element, children of block container |
| dme-blocktype-<type> | Child of block-container, for each widget. eg. block-type-image |
| dme-blocklist | Block list container, eg. in Image Text widget, heading and text are under dme-blocklist |
TBD