How to Maintain Container Layout on Mobile Devices

Seeing a desire to maintain a container layout that is not responsive to mobile devices, you can still achieve this through the “grid-template-columns” code.

Here’s the code you need to add to your application’s custom CSS:

Note: class name is grid-container

.grid-container .oneToOne {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
}

10 Likes

Added to the library, thank you!

1 Like

@ThinhDinh I tried this today. The units in the number entry boxes don’t align. Thoughts? @Himaladin maybe knows?

It seems the issue is because you don’t want a label on one of the entries, so the space is taken up by the input box. You can fill the label with a blank space to make them align again instead of adding CSS code.

Time to resurrect emptyspace???

1 Like

Ha! Except, no, there is a unit on all entry boxes. I had to add a width:100 to the entry box and do an align-items: end to one of the parent divs. I’ll see if I can capture what did to make it work!

After switching to grid-template, I noticed that targeting .oneToOne > div:nth-child(2) and adding some top margin helped push it down. The rest was just setting the input field ([data-testid="wf-input"]) width to 100% so the unit stays aligned at the far right of the field. That was just based on my observation from inspecting the DOM.