New to the community? Start here

How to keep column layout in form on small screens

Forminator form can currently have up to four columns. In my form fields are in four columns and when the browser is resized down or on mobile devices it “collapses” into one column with each field taking 100% width.

How do I stop that and keep the four columns layout even on small screens?

Also, how to make sure that while that layout is kept, the fields got “narrowed down” accordingly?

Mon, 3 Feb 2020 20:07:48
More Forminator Pro discussions
Forminator Pro
  • Ouissal Aouinti
    • Support-Woman

    Hello Kurt !

    I hope you are doing well today!

    Since Forminator supports small devices by default, it will take a full width on smaller devices, and this is for multiple reasons, one of them being the good looking form.

    However, I tried to help with some CSS rules and here is what I could reach:

    [attachments are only viewable by logged-in members]

    If you still want like this layout, and you are OK with the look of your form, here is the CSS I made for this form.

    /*/--------------  Small devices (600px and smaller)   --------------/*/
@media only screen and (max-width: 600px) {
	.forminator-row {
		display: grid;
		grid-template-columns: 80px 80px 80px 80px;
		height: 85px;
		align-items: last baseline;
		text-align: center;
		margin-left: -30px;
	}
	.forminator-col {
		display: grid;
	}
	.forminator-row:nth-of-type(3),
	.forminator-row:nth-of-type(6){
		display: none;
	}
	.forminator-row:nth-of-type(4){
		align-items: center;
		text-align: left;
	}
	.cs-hide{
		display: none;
	}
	.forminator-col label.forminator-label{
		font-size: 11px !important;
	}
	.forminator-button.forminator-button-submit{
		width: 150px !important;
	}
}

    To add this CSS code to your site, please head to your Dashboard > Appearance > Customize > Additional CSS.

    Paste this code there and save your changes using the top right blue button.

    I hope this helps, have a nice day!

    Kind regards,
    Ouissal

  • Kurt
    • Site Builder, Child of Zeus

    Well I had a try with this CCS code, and I get kinda different result.
    I noticed that the hidden fields (that I did earlier with other css code ‘cs-hide’ ) are not there anymore on small screen, just like in your screenshot. In the first 3 rows the last column is moved to third column.
    I think that the ‘cs-hide’ code in your code is not necessary, I removed it and the fields are there now.
    But I still have different result than yours; my fields are dropping if the label text is too long and I never see the up/down arrows at the right of each field.
    Is that a missing align somewhere?
    Also funny effect now when resizing the screen on desktop; if you go below ~800px the form fields are in 1 column (standard re-arrange of forminator), if you then go lower to <600px then they come back to 4 columns (extra css code). Mabye it is better to adjust the css from 600 to this 800?

    It would be nice to have a sort of field combine feature and also text alginment to right align figures i.e.

  • Ouissal Aouinti
    • Support-Woman

    Hello Kurt!

    Hope you are having a great day!

    I re-checked your form and as we could notice that the arrows are not shown the same as on every browser and this is related to different browsers, however, I believe that the cause of the arrows on the small devices is that the small devices can’t use it very well they have there own keyboard which is more easy to use than the small arrows, but still here is a CSS rule that prevent the arrows from disappearing.

    input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    opacity: 1;
    --web-kit-appearance : number-input;
}

    Also, for the screen resizing you can adjust the value in media query to (@media only screen and (max-width: 800px) ), however, when it comes to the labels that are missing with the fields, it is a bit hard to adjust them so that they align in the same line, so I will suggest you to add CSS rule and see if it fixes it.

    @media only screen and (max-width: 800px){
	.forminator-col {
	    display: grid;
	    height: 90px;
	    grid-template-columns: 1fr;
	    align-content: flex-end;
	}
	.forminator-col span {
	    display:none !important;
	}
}

    Please head to your Dashboard > Appearance > Customize > Additional CSS and add this CSS code as well.

    I hope this helps. Have a nice day ahead.

    Kind regards,
    Ouissal