1. Enable “Custom Grid Sizes” to create CSS Media Queries for your slider.
Custom Grid Size: OFF = The slider and all its content will simply scale (i.e. “zoom”) in and out when the browser window is resized.
Custom Grid Size: ON = Creates CSS Media Queries, which allow you to resposition/resize your content for that particular breakpoint.


2. Make sure your content is always placed INSIDE the Layers Grid canvas.

3. Adjust the Responsive ALIGNMENT
GRID based = The content will always be confined to the Layers Grid area.
SLIDE based = The content will be positioned based on the entire size of the slider.

-
Test both options on the front-end of your site to help make your decision.
4. Adjust the Responsive OFFSET
OFF = The content’s position will always honor the exact numbers you’ve chosen for your X/Y offsets (#9-10 here).
ON = The content’s X/Y offsets will be elastic.

-
Not sure which option to use?
Test both options on the front-end of your site to help make your decision.