Media Responsive Form

Forms
1

In bootstrap we can define custom css depending on screen size can we achieve same in plumsail forms?

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

2

Hello @ShantiBhattarai,

Yes, you can use @media screen in CSS editor to set the style of the form depending on the size of the screen. Please, see the example:

/* Screen size is smaller than 768px */ 
@media  screen and (min-width: 768px) {
	.cssClass {
	    background-color: red;
	}
}

/* Screen size is 992px and 1500px wide*/ 
@media  screen and (min-width: 992px) {
	.cssClass {
	    background-color: grey;
	}
}

/* Screen size is 1200 pixels wide or wider */ 
@media  screen and (min-width: 1500px) {
	.cssClass {
	    background-color: blue;
	}
}
1 Like
3

exactly what i am looking for thank you.

1 Like