tips for tablet styling?

I have some pages developped according an graphical design. Some containers/snippets have images with 1600 px width, where some other containters/snippets have a maximum width of 950px. At this moment, both Desktop and Tablet navigation is enabled. I'm testing with an iPad2 with 1024px witdth and when looking at the pages, the MX page is centered on the tablet, and as a user you can swipe/scroll to the left or right. The customer want to see a steady page only scrolling up or down, not scroll to the left or right on the tablet. Does anybody have some tips for managing the MX pages on a tablet? Eg. - rebuild al pages and images with specific tablet styling - are there CSS classes/element to style the tablet pages? eg. view it smaller on the tablet? Any kind of ideas are welcome Thanks, Michel
3 answers

I would recommend to upgrade your project to 5.18 or higher. So you can use the new page templates Optimized for Tablet. Or upgrade to the Mendix 6 version to get the newest features. Check link for more info:


Image widths can be made responsive to the screen width, see this page for more about this. It is advisable to check each page/image for the need to make it scale along with the screen width.


I have created a design for desktop/tablet/phone but in the end I only use the phone design. So I can recommend you to use the phone layouts & designs for tablet too. If a page has more options then use a different page but otherwise use always the phone layout because users will find it more comfortable then a different design on each device. try to use % as much as possible instead of pixels!