This document shows two methods of adapting your component to different screen sizes.
component Main { connect Ui exposing { mobile } fun render : Html { if mobile { <div>"MOBILE"</div> } else { <div>"DESKTOP"</div> } }}
component Main { state width : Number = 0 use Provider.ElementSize { changes: updateWidth, element: base } fun updateWidth (dimensions : Dom.Dimensions) { next { width: dimensions.width } } fun render : Html { <div as base> if width < 700 { <div>"MOBILE"</div> } else if (width < 1100) { <div>"TABLET"</div> } else { <div>"DESKTOP"</div> } </div> }}
Mint UI is a design system and component library for building websites, web and desktop applications.