How to apply different media queries if language is English & if language is german?

I have two application languages 'English' and 'German'. I am using session variable to identify whether the current screen  language is English or german.Now I want to apply different media queries for both languages by checking its session variable. How can I do that? plzz help..

I guess there is a concept within Media queries where it supports multiLingualism.


I saw a sample like this.


@media only screen and (max-width: 650px) {
  /* Minimum menu size in German. */
  :lang(de) .NavigationBar__container {
    background-color: black;
    /* ... */
  }
}
@media only screen and (max-width: 600px) {
  /* Minimum menu size in French. */
  :lang(fr) .NavigationBar__container {
    background-color: black;
    /* ... */
  }
}

Need a bit more research. I will add it here If I find more

I tried it but the 'NavigationBar_container' class name is not coming under the container's style class property 

Hi Shweta,

You can use extended property, and put Property="Class", and Value = "NavigationBar__container", then in runtime it will choose styles based on the language.


Thanks,

Balu

Hi,

I'm using web app and I didn't find 'class' property under extended properties. Please  help

Hi Shweta,

Those are only suggestions, you can actually type in anything you want in there, so you simply have to type in class an it'll work :)


Hi Shweta Gedam,

You want to fetch the labels based on the language selected?


Carlos Ribeiro da Fonseca wrote:

Hi Shweta,

Those are only suggestions, you can actually type in anything you want in there, so you simply have to type in class an it'll work :)


I tried it but don't know why it's not working in my case :(.. I'm using session variable (session. LanguagePc) which translates the whole page into german whenever i selects this lang .plss tell me the way to apply media queries using that session variable. 


Priya Khade wrote:

Hi Shweta Gedam,

You want to fetch the labels based on the language selected?


Want to fetch respective languages media queries based on the language selected. 



Hi Shweta Gedam, 

why don't you try a conditional css in styleclasses depending on your locale (or session values)?

something like if (session. LanguagePc="de-DE", "Class Something", "Class Else") and define your classes .Something and .Else CSS in Style sheet.

(example is credited to Kilian for a conditional css here: https://www.outsystems.com/forums/discussion/25927/conditional-css-of-the-web-screen-style-sheet/)