295
Views
4
Comments
Condition according to my screen width
Question

Good morning.

I would like to simply use an If with the condition: If the total width of my screen is less than 1024px, paint me one thing and if it is false, paint me another.

Is it possible to use this style condition in a simple If? Without using any CSS?

And if CSS were necessary. How would it be?

Thank you very much 

2020-11-25 10-45-32
Mostafa Othman
Champion

Hello Mario,

If your question about making your web application responsive and you can open it on different devices (desktop, tablet or mobile) you can check following link about device detection and adaptive UI patterns:

https://success.outsystems.com/documentation/11/developing_an_application/design_ui/look_and_feel/responsive_ui/


If you want to know width of screen to implement some logic you will need to use Javascript code to retrieve screen width then use your If condition based on returned value from javascript

2023-08-20 04-20-03
RAD Manage

Mario,
You can use the built in functions for device type if that is sufficient.


If you need exact size as mentioned without CSS you'll need to run some custom javascript on a previous screen and store the user's screen size, and use that information either from the database or a session variable or input variable to control the IF statement.


Best,

RAD Manage

2023-10-21 19-42-11
Tousif Khan
Champion

Hello

You can change the screen css based on the resolution for that you can use Media Quarries

I am attaching you a link for the same - 

https://www.outsystems.com/forums/discussion/43178/how-to-use-mobile-device-resolution-in-css/

https://www.w3schools.com/css/css3_mediaqueries.asp

You can also handle this with the use of Display on the device widget - check here for tutorial - https://success.outsystems.com/documentation/11/developing_an_application/design_ui/patterns/using_mobile_and_reactive_patterns/adaptive/display_on_device/

I hope this will help.
Best Regards
Tousif Khan

2025-12-17 21-10-06
Shlok Agrawal

Hey @Mario Sepulveda 

One thing you can do is get the VH and WH and store in in a local variable and use this dimension to set a condition. 
Eg If (wh <=1024,condition1, condition20

Please refer this doc to get hight: 

https://www.outsystems.com/forums/discussion/54316/height-of-web-screen/#:~:text=if%20you%20set%20the%20height,height%20irrespective%20of%20screen%20size.&text=Babu%20Basha-,%24(document).,JavaScript%20to%20your%20screen%20action.

Thanks 
Shlok Agrawal

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.