Best Practices | DivMagic

Tips and tricks to get the most out of DivMagic

1. Work mobile-first

Similar to Tailwind, target mobile devices first and then add styles for larger screens. This will help you copy and convert styles much faster and easier.

DivMagic converts an element as you see it in the browser. If you have a large screen, the copied styles will be for a large screen and include the margin, padding, and other styles for that screen size.

Instead of copying the styles for a large screen, resize your browser to a smaller size and copy the styles for that screen size. Then, add the styles for larger screens.

2. Pay attention to the background

When you copy an element, DivMagic will copy the background color. However, it is possible for the background color of an element to be coming from a parent element.

If you copy an element and the background color is not copied, check the parent element for the background color.

3. Pay attention to grid elements

DivMagic copies an element as you see it in your browser. grid elements have a lot of styles that are view size dependent.

If you copy a grid element and the copied code does not display right, try changing grid style to flex

In most cases, changing the grid style to flex and adding a few styles (ex: flex-row, flex-col) will give you the same result.