Hi @jpnl
I hope you are doing well today.
Please note that by default, this is not possible, and this will be outside the scope of support to provide such a thing. For that, you’ll need to hire a developer to provide the required custom code for you. WordPress provides a jobs directory here https://jobs.wordpress.net/. If you need further advice about it, feel free to email [email protected].
– Subject: ATTN: WPMU DEV support – wp.org
– Link back to this thread for reference (https://ww.wp.xz.cn/support/topic/prevent-field-stacking/)
Kind Regards,
Kris
Thank you for your reply. At what width does the form switch from flex to block/stacked display?
Hello @jpnl
Hope you’re doing well today!
Thank you for reaching out to us.
At what width does the form switch from flex to block/stacked display?
Ideally, that would happen at 783px. To confirm, you can switch to the responsive mode on your browser and test the scenario.
Hope this helps.
Kind Regards,
Saurabh
Thanks Saurabh,
Unfortunately that’s not the full story. I did find the media query @media (min-width: 783px) on the forminator-row that switched the display from block to flex, but that works on the viewport.
There is another level that works on the container width in which the form is loaded.
I have added the form on this page in containers of 782px, 550px and 500px.
- With 550px container width the form still shows fields in a row for as long as the viewport is >= 783px but as soon as the viewport goes below that, the fields stack, even though the container remains 550px.
- With a 500px container width the form shows stacked fields, even if the viewport is 1920px.
So besides the viewport, the stacking also starts somewhere between a container width of 500px and 550px. At what width is that? And what css can I use to start stacking from that width and not already at 783px?
Thank you
JP
Hi @jpnl,
There is another level that works on the container width in which the form is loaded.
By default, the stacking occurs based on the screen size and not the container width. So when its less than 783px viewport and any container width it would be stacked.
In your examples, the viewport doesn’t have any changes only the container width, so anything less than 480px container width will get stacked if the view port is greater than 783px.
Forminator uses JS to detect and add forminator-size--small class when the form container width is ≤480px. You can check and see if the above could be overriden.
Regards,
Nithin
Thank you, that helps!
So now I would like to override the 783px media query to a lower value like 500px, to stop it stacking on tablets. I understand I need to add another media query for that and I am looking for the css I should use. I have found the below with the Chrome Inspector. Can you please verify I didn’t miss anything?
@media (min-width: 500px) {
.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid="enclosed"] .forminator-row{
display: flex;
flex-wrap: wrap;
margin-right: -7px;
margin-left: -7px;
}
}
@media (min-width: 500px) {
.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=enclosed] .forminator-col:not(:last-child) {
margin-bottom: 0;
}
}
@media (min-width: 500px) {
.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=enclosed] .forminator-col {
min-width: 0;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0 7px;
}
}
Hi @jpnl,
The shared CSS looks good, but along with the above CSS I think you’ll also need to target for these too:
.forminator-col-md-3
.forminator-col-md-4
.forminator-col-md-6
It’s something you’ll have to test and see how that goes according to the 500px screensize and if there are more tweaks needed.
Regards,
Nithin
Ok, I’ll have a look. Thank you for your help!
JP
