Learn how to create responsive prototypes

Prototypes with responsive design adapt to your screen size when simulating. When a prototype has an adaptive design, it will display well on any screen size, including mobile, tablet, and desktop.
Here’s what you need to know to create responsive prototypes in Justinmind:

Pinned elements

Pinning an element will place it on a defined position on the screen. You can pin an element to create Parallax effects with sticky headers and footers, centered content, and more.
Learn how to use pinned elements.

Percentage height and width

Elements with percentage-based height and width will automatically resize to the simulation browser’s dimensions. Use elements with percentage height and width to define elements that respond to the screen size.
Learn how to use percentage width and height.

Liquid layouts and breakpoint events

Create breakpoints with events to detect the screen size and adjust elements on the screen to match the new screen dimensions. Use events to make truly liquid layouts.

Learn how to use liquid layouts and breakpoints.

Once you learn these principles, you can create many responsive elements with Justinmind. Check out the following tutorials to learn how to apply these principles:

• Create a basic responsive prototype
• Create a conditional menu
• Create a fluid table
• Create a fluid grid