Datepicker inline on mobile

  • Resolved altuser

    (@altuser)


    3 years, 8 months ago

    Hello,

    Is it possible to have two datepicker fields next to each other (inline) on mobile?

    The fields are placed next to each other in the form builder and are displayed correctly on the desktop. On mobile, the fields are stacked on top of each other. I have tried adjusting the width of fields and other tips I have found in this forum but nothing works. I’m not skilled in CSS so any help is much appreciated.

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Amin – WPMU DEV Support

    (@wpmudev-support2)

    Hello @altuser ,

    That should be possible with some CSS, however, since every form is different we would need to see your form to get the correct rules.
    Can you share the URL of your form with us?

    kind regards,
    Kasia

    Thread Starter altuser

    (@altuser)

    Hello,

    Here is my URL: https://plantybottle.com/test/

    It would be also great to have the submit button inline with the two datepickers as well.

    Thank you for your help

    Plugin Support Williams – WPMU DEV Support

    (@wpmudev-support8)

    Hi @altuser

    Thanks for sharing the form!

    Try adding this CSS to the site, via “Appearance -> Customize -> Additional CSS” option:

    #forminator-module-4655 .forminator-row:not(.forminator-row-last) {
	display:inline-block;
	width:85%;
	float:left;
}

#forminator-module-4655 .forminator-col {
	width:50%;
	display:inline-block;
}

#forminator-module-4655 .forminator-row-last {
	float:right;
	display:inline-block;
	width:10%;
}

    Note: you may need to clear cache on site/server (if there is any used) after adding the code.

    Best regards,
    Adam

    Thread Starter altuser

    (@altuser)

    Hello,

    It worked perfectly! Thank you for your help.

    Best regards

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Datepicker inline on mobile’ is closed to new replies.