Greetings, I'm wondering if you CSS sleuths could help me real quick? See this test page for an example.
I'm working with FF support, and they don't offer customized CSS but they provided me the following starter CSS to maintain fields in the same row with a mobile device:

@media only screen and (max-width: 600px){
.frm_fields_container .my-custom-css-class{
    grid-column: 1/-1;
    grid-row: auto;
  }
}

This works, to a point: try narrowing screen on the above page and you'll see, or pull it up in portrait mode on a device and the one row is broken into multiple rows.
How might I edit this CSS to make sure it also works in portrait mode on a mobile device? (I realize it's cramming quite a bit into a small horizontal space...) I tried a few things, but no luck.
Thank you for any help you might offer.
Regards,
Jim P.