Forums › Forums › Search & Filter Pro › Field Positiong & Placement

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Anonymous
    (Private)  July 9, 2020 at 8:17 pm #252318

    Hi,

    Is there any way I can make my form field positions look like this?

    It looks like a 2 column vertical with a specific break from column 1 to column 2. And it’s responsive so the columns will stack on mobile:

    https://dsrleasing.com/

    My current form looks like this (currently messing around with vertical and horizontal placements)

    http://insidecarguys.wwwmi3-sr8.supercp.com/

    Trevor
    (Private)  July 10, 2020 at 11:48 am #252354

    The ability to place the fields inside CSS grids that you make in the theme will not arrive in our plugin until we release V3 in a few months, sorry. CSS columns can be applied, but the effect does not give you the control that you need. The only other way to do as you want would be to use the relatively new CSS Grid CSS rules, accepting that only modern browsers support these.

    But, I have no examples or code snippets to share with you, sorry. CSS Grid is something I have only a small amount of experience using it on real sites. This is a good guide to start with:

    https://css-tricks.com/snippets/css/complete-guide-grid/

    Anonymous
    (Private)  July 10, 2020 at 9:24 pm #252481

    Thanks Trevor. Whats the best I can do to control the positioning of the fields so it looks at least uniform? I would like the fields to at least be lined up correctly.

    Thank you!

    Trevor
    (Private)  July 13, 2020 at 2:45 pm #252607

    You could manually set widths using CSS (most often, given the structure of our forms) it is the label that needs a width. But, this will give you problems with mobiles, so you may have to make the CSS responsive to different screen widths. You need to make two sketches, one for desktop and one for mobile, of what the form should look like, then work out the mobile breakpoint for your theme. Then I could probably help.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)