CSS Media query on device orientation

2
Hi, I am currently working on a customer facing responsive website which works on desktop, tablet and phone. The app has a progress bar which renders vertically (tablet and phone) or horizontally (desktop). However on tablet I am facing an issue where if somebody holds it on landscape mode instead of portrait the progress bar doesn't render properly. I looked online and found following but struggled to find a way to implement in mendix css. @media screen and ( orientation:portrait) { /* Portrait styles here */ } /* Landscape */ @media screen and (orientation:landscape) { /* Landscape styles here */ } Wondering if it will be profile-tablet than media query? What I am looking for is in tablet landscape mode I want different styling and different one for portrait tablet mode. Any suggestions would be much appreciated? Thanks in advance!
asked
3 answers
5

If you want to combine the .profile-tablet classes with media queries in your CSS, the way to apply the rules you provided would be as follows:

@media screen and ( orientation:portrait) {
   .profile-tablet .your-target-class {
      /* content */
  }
   .profile-tablet .your-next-target-class {
      /* content */
  }
}

Basically you define all your CSS classes within the media query itself. The same structure would be applied to the landscape orientation.

answered
0

I see that you are working on version 5.20.0. Do you use SASS for your styling? If so, you could add an extra file for your .mx-progress and add the media queries there.

Do you have enough information? Let me know if you have any questions.

answered
0

I don't really get why the orientation is so important. When the orientation changes, the width of the page changes, which can be used to apply different styling using media queries.

I have seen cases where as you suggested the profile-tablet/phone mendix styling messes tings up.

(i personally don't like using the profile-* for responsive styling)

answered