As Jeffrey says, Mendix creates horizontal form fields using the bootstrap responsive grid system. The CSS classes automatically applied to the form labels and fields only apply down to "small" screen sizes. So, for screen sizes above 768px wide, you'll see the labels next to the fields, and for smaller screens they'll stack on top of each other. This is typically because a screen under 768px isn't comfortably wide enough to fit both a label and an input with enough space.

If you still want to get your labels set up horizontally, you can turn off the labels on the input fields, and then use the Mendix layout grid like this:

When you set the column weights using the modeler, the platform will apply CSS classes for a medium sized screen or larger. You can also add your own classes for small or xs screens by double-clicking on the column header and adding a CSS class like this: "col-xs-6". That class means, "make this column use 6 of 12 units on an extra small (< 768px) and larger screen. If you do this each of the 6 columns in the image above, you should be able to achieve your desired design. Adjust the column widths as necessary to make the label and input fit on the screen. 

Here's the bootstrap grid reference if you'd like to learn more: http://getbootstrap.com/css/

Hi Willem,

I guess that this is default Mendix styling, because of the small phone screens and making sure that the labels and inputs are shown correctly.

So if you want to apply the horizontal labels in your form on the phones screen, you should have to apply your own styling. 

For more information about styling Mendix apps you can take a look at: https://ux.mendix.com/theme-viewer.html?profile=desktop?theme=silver_linings