app.minWH#.css file not working

[NickIliev]

From @Skintillion on December 15, 2017 20:5

Tell us about the problem

App wide minWH app.minWH###.css does not work.

Which platform(s) does your issue occur on?

Both iOS/Android

Please provide the following version numbers that your issue occurs with:

• CLI: 3.3.1
• Cross-platform modules: 3.3.0
• Runtime(s):iOS 3.3.0 - Android 3.3.1
• Plugin(s):
  "nativescript-theme-core": "1.0.4",
  "tns-core-modules": "3.3.0"

Please tell us how to recreate the issue in as much detail as possible.

Start template
add app.minWH###.css
modify a property
verify tablet is not different from phone.

view.minWH###.css works great, but I am modifying a component based on min width and height that is used in multiple areas. It would make sense for me to include an app wide minWH css file and modify non view-specific properties there.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Copied from original issue: NativeScript/nativescript-cli#3273

[NickIliev]

Hello @alg

Indeed the screen size qualifier is not working for the main app.css file. In fact, the screen size qualifiers are officially supported for the layout pages 9*.xml0. This said you can easily workaround your issue by providing different styles for the different styles and apply them in the respective XML pages.

For example:

app.css

.my-style{
    color" red;
}

.my-style-wh600 {
    color" red;
}

And then in my-page.minWH600.xml apply my-style-wh600
while in my-page.xml apply my-style CSS class.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.