Responsive Horizontal Columns

[Adey]

I wondered is it is possible to have lets say

single radio button field with images associated x 4 side by side using the excellent facility within the editor.

Below shows what is displayed in desktop. Just test data.

I would like when in mobile for the image to show in says 2 columns. At the moment when going down to mobile resolution it just aligns them all left and a single column.

Even If I have to compromise and have 2 on desktop and mobile it would be fine. I’m more asking hwo we go about getting two columns in mobile. Ideally as well having the image and radio button aligned center to the field.

Ideas would be appreciated thanks.

[Adey]

Any ideas on this @user5c0166073a6c48.6 you seem to be the resident css wiz.

Essentially it would be great to have

Desktop (Column of 4 items)
Mobile Column of 2 items.

Or at least Mobile a single column with everything centre aligned vertical and horizontal for the checkboxes. Ideally by a custom css rule.

[user5c0166073a6c48.6 (Gravity Bot)]

@Adey yes this is possible. Would you mind sharing a URL for what you have already?

[Adey]

Sorry its a local dev site Ric. And many thanks for responding.

My ideal world is

Desktop

Checkbox1 - Checkbox2 - Checkbox3 - Checkbox4

Mobile

Checkbox1 - Checkbox2
Checkbox3- Checkbox4

Ideally centre aligning the check box and text description in mobile resolution.

Just to add - These are individual checkbox fields with a single tickbox option.

[user5c0166073a6c48.6 (Gravity Bot)]

As in each field has one checkbox? Off the bat why not use radio buttons instead?

Or have each option inside one checkbox field?

[Adey]

I could have multiple but its easier and more convenient with individual checkboxes. Plus the conditional logic can be changed on a single field easier when the form goes live.

You cant de-tick a radio button can you? Thats the only reason I picked a check box Ric.

[user5c0166073a6c48.6 (Gravity Bot)]

You can detick a radio button by clicking another option.

With your use case, are visitors able to select more than one option? Or should they only be able to select one option?

[Adey]

Thanks Ric.

Each Washing machine is a separate field / checkbox with a single entry. The user has to option to choose 1 or many items.

This may be a unorthodox but works for me in this scenario, I’m bending the rules of gravity but it works and looks good. This being an inventory form. Each item will be different in final form. I just duplicated for simplicity.

I have managed to get this on desktop

And this on mobile

Ideally I would like

WM1 - WM2
WM3 - WM4

When reduced to mobile size.

[user5c0166073a6c48.6 (Gravity Bot)]

Do all the the checkbox options show on page load? You mentioned you have some conditional logic applied to some of them.

I can write some css targeting the checkbox fields so they appear the way you’re wanting but if some of the checkbox fields aren’t visible on page load it might effect the layout. Can you confirm?

[Adey]

No conditional logic on load Ric. Its vanilla at the moment. By conditional logic I meant given a dropdown etc further down the form it may for instance hide one of the checkboxes. This may or may not be required. Its driven really by what we come up with.

[user5c0166073a6c48.6 (Gravity Bot)]

Set your checkboxes inside the same row in the editor like this:

Then add the CSS below:

@media only screen and (max-width: 675px) {
.gform_wrapper.gravity-theme .gfield.gfield--width-quarter {
    grid-column: span 6 !important;
  }
}

[Adey]

hmm not working for me. No change at all. Did change to max width 400px but tried 0 and still didn’t work.

Video below - shows in preview mode for gravity but also tried on the page with theme css applied

https://wormhole.app/de1L1#hElq7Uth9TEaXPPt_wH0lg

[user5c0166073a6c48.6 (Gravity Bot)]

Can you open the page with Google developer tools and click the mobile breakpoint? Resizing your window is not always reliable.

If the CSS is not adjusting the mobile columns the try adjusting the 6. You could try 3 or another number until you get the expected output?

Also, can you add the CSS to your customizer > additional CSS tab?

[Adey]

Adding it to the additional css worked a treat Ric. Thanks. Didn’t work on the main style sheet but did on the additional. Strange that as I have other things working in the main style sheet for gravity.

Icing on the cake here.

Any idea how I get

A/ The items aligned horizontally. They are shifted to the left at the moment. Having equal space left and right (including the check box) would be great. Even better the checkbox below the image and the description below the check box. Then all aligned vertically and horizontally. Really know I’m pushing luck now but you may have the answer in a few lines.

B/ The tick box say double the size. Its very small by default and making it a bit more prominent would be nice.