Dynamic layout on differend devices

0
Hi,   I have an application with a few pages and a template grid on one of those. The page is opened from a microflow. I’d like the grid to have 4 columns on a desktop browser, but only 1 column on the phone screen I thought it would be easier, but I can’t figure it out, how to do it without duplicating the page (and microflows and home pages, ...) for both devices. Is there any solution for this?
asked
4 answers
5

As already mentioned there are several possible ways to try. As commented by Igor Mesterovic, you could create several pages depending on the device type. You can use the navigation profiles and there css style helpers for layout grids that could also help you to manipulate the grid size for different screen size. If you would like to have one column only on mobile device, you can force that by adding the class col-xs-12 to your layout grid columns. Read more here https://getbootstrap.com/docs/3.3/examples/grid/

answered
1

You can also use the .profile-X class on body instead of media query hell

answered
1

make another form for mobile and on setting runtime put the workflow like this

 

answered
0

Usually you would create columns with the layout grid.

Since you define the columns on the TemplateGrid you can force this behaviour (if you only want 1 instance of that page, independent of device type) by using media queries in CSS.

e.g. if screen width is smaller than 768 set the width of the templategrid item to 100%

@media only screen and (max-width: 768px) {
  /* For mobile phones: */

}

answered