CSS Tips & Tricks

I am looking for CSS wisdom from users in the community. Do any of you have samples of cool designs or tips and tricks they'd like to share? I am curious about how to best set CSS for SharePoint fields while keeping the form responsive. I have found that adding a block of color for a background makes form become more "sticky" and loses some of its adaptive redraw responsiveness.

Plumsail Forms SharePoint Online Version 1.4.6 (2019)

1 Like

Hello @shedev,

As I see from your screenshot, you are using Table container. That is the reason for form responsiveness loss.

To make a form responsive, please use Grids instead of Tables. Please see 'Use Grids instead of Tables' article for more information,

image

You can set the grid background color or assign CCS class to change the look of the form.

image

This has made a difference - thank you.

1 Like

how can we specify different form width depending on size of screen. i want the from width to be specified only for desktop big screens greater than 1600 everything else default

Hello @ShantiBhattarai,

You can use the following CSS in CSS Editor to set the width of the form if the screen size is 1600 pixels wide or wider.

@media  screen and (min-width: 1600px) {
	.fd-form .container-fluid {
	    width: 800px !important;
	}
}

i ended up doing in javascript like below if anyone else need this code, but the solution you provides is better and it answers the other post i have created. Thank you.

if($(window).width()>1400)
{
//alert("large");
$('.PC').removeClass('PC').addClass('Desktop');
}

1 Like