Easy Css Setup for Tablet and Phone NativeScript

I recently had to modify my app to support tablets so I thought I’d share a super easy way I found to add custom styling.  So I mean the app works on tablet but the UI is just stretched, not really optimizing the space.

So lets assume this setup (omitting JS since it doesn’t apply)

• main.xml
• main.css

So lets add our custom tablet layout.  Just copy\paste main.xml and rename to:

• main.minWH600.xml

So NativeScript is smart enough to know which XML file to load based on the naming convention… all the other files (JS\CSS) load as normal; so we’re still loading main.css.

If you create a new file named main.minWH600.css then like the XML it’d load that one.  The problem I’ve found is there’s a lot of shared styling between the two so I don’t love having an entirely separate file.

So here’s the solution I came up with…
Open your main.minWH600.xml file and on the root node, add\append a class name like .tablet

So now in your CSS you can target with a heavier selector, no need to have multiple files!