Container with and responsive

I have a question on how to work with form width and responsive design.


When I have a form by default it's set to 6 column width.
On desktop it will show on 50% width, with empty space on both sides.
On mobile it will show on 100% width.

Now my UI designer wants to show the desktop design smaller, namelijk on a 25% width, while keeping 100% width on mobile.

However, the moment i set the width to 3 column, the desktop is 25% width AND the mobile is 25% width.

How to best set the width so it works as expected on both mobile (100% width) and desktop (25% screen width)?

PS. My company is on OS 10 still.

Hi Paul,


With Form you have a style class associated namely, Form


This comes form the CSS defined in the theme / patterns or other base modules used. 



For each Style for Desktop you have corresponding phone and tablet classes


So, for Form you can have a class

.phone .Form {
    width: 100%;
}


Hope this helps.


Regards,

Saugat

Paul. wrote:

I have a question on how to work with form width and responsive design.


When I have a form by default it's set to 6 column width.
On desktop it will show on 50% width, with empty space on both sides.
On mobile it will show on 100% width.

Now my UI designer wants to show the desktop design smaller, namelijk on a 25% width, while keeping 100% width on mobile.

However, the moment i set the width to 3 column, the desktop is 25% width AND the mobile is 25% width.

How to best set the width so it works as expected on both mobile (100% width) and desktop (25% screen width)?

PS. My company is on OS 10 still.

Hi Paul,

there are many option by you can achieve this either write media query or use in-build pattern.

In this case you should use structure pattern.keep the form width to fillparent.

then put your form into left side of medium left column.

As outsystems has already written media queries for structure when it goes to mobile by default it takes 100% width.also you can customize split behavior.


Regards,

Pankaj

Saugat Biswas wrote:

So, for Form you can have a class

.phone .Form {
    width: 100%;
}

Thank you Saugat.
I managed to make it work by using the following CSS.

SyntaxEditor Code Snippet

 .phone .phonefullwidth,
.tablet .phonefullwidth {
    width: 100%;
}

I can then add the class phonefullwidth to a top level container. This makes the container go full width on a mobile device, while I can set the desktop size by a preferred number of columns, like 3 or 4.