Mobile PWA - reacting to Device Orienation changes

Hi all, 

In a mobile PWA screen, I want to change the styles of a set of buttons dependant on device orientation. What is the best way to achieve this? I can see there is an 'Orientation Event' forge component.. which would appear to fit the bill. Is there a way to do this without installing this component? 

Many Thanks,

Mark Picton


Hi Mark,

If you look in your application in the OSUIMobileBase theme css that is use you will notice a class landscape, you can use it yourself too to condition CCS 

So add a custom class to the buttons who's styling should depend on the orientation.

Then in the CSS:

So no need to install nd use a Forge asset.



Hi Mark,

Forge component is not required.  
I achieved same sort of functionality using GetDeviceOrientation built in method. Check the orientation and then apply custom CSS/JS at screen level.

Please let me know if it works for you.


Thanks Daniel and Ambar, I've used the'.landscape' in the css and it's working perfectly. 

Thanks for your help!

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