Layout issue

Hi,

I have set breakpoints at templates for mobile and tablet like this

@518014_col: 12;

/* default breakpoint */
.aem-Grid {
.generate-grid(default, @518014_col);
}

/* phone breakpoint */
@590883 (max-width: 768px) {
.aem-Grid {
.generate-grid(phone, @518014_col);
}
}

/* tablet breakpoint */
@590883 (min-width: 769px) and (max-width: 1200px) {
.aem-Grid {
.generate-grid(tablet, @518014_col);
}
}

When I try to resize the component the controls are unstable (jumping too much) and not very usable for editors.

Can anyone help me to fix this.