When a skin is responsive, the navigation elements are automatically adjusted depending on the size of the screen. For Tripane output, you can enable responsive output on the Setup tab of the Skin Editor. In addition, on the Skin tab of the Target Editor you can adjust the same settings as Side and Top Navigation output.
- Tablet Breakpoint Enter the number of pixels for the maximum width of a Tablet view.
- Mobile Breakpoint Enter the number of pixels for the maximum width of a Mobile (or phone) view.
- Use device with media queries Select this option if you want to base the responsive output not merely on the width of the output display, but on its width in the actual device (browser, tablet, or mobile). In other words, if you do not have this option selected and you view the output on a full browser, you can see the tablet and mobile layouts simply by reducing the size of the browser window. But if you select this option and you reduce the width of the browser, the layout will not change to the tablet or mobile formats.
Furthermore, you can use conditions, styles, and media queries to make your content responsive.
Note If you have a Tripane skin in your project and you enter responsive output settings in both the Skin Editor and Target Editor, the settings in the target take precedence. However, this is not true if you have not yet made a change to the tablet or mobile breakpoint fields in the Target Editor, but you have made changes to them in the Skin Editor. In that case, the numbers from the changed Skin Editor will be used.
