How to make multi-column form in a grid fit at Mobile Portrait breakpoint?

The webpage I’m building has a two-column form in the “Let’s Talk” section at the bottom. The entire section has a left and right side so I put the entire section into a grid so that I can stack these two sections on top of each other at smaller breakpoints. Within the left section (“lets-talk-content-left”) sits the form. I put the form into another grid so that all the form fields will stack in one column at the Mobile Portrait breakpoint. At that smallest breakpoint, I would change the grid from two columns to one. However, in my page that isn’t working. Instead I’m still seeing two columns.

I read a question by someone else here who had a similar problem and the solution was to change the grid to a Flexbox at this smallest breakpoint. But when I tried that with the “let-talk_form-component”, the form fields all would stack but they still extend outside the viewport. I tried different size settings but I could only get the fields to fit inside the viewport if I set the width to a certain number of pixels which doesn’t seem like a good solution. I also played around with a VW setting (e.g. Width or Max Width = 85 VH) which causes the fields to fit but they aren’t centered so that doesn’t seem like the right solution either. What is the best way to make this form fit in the viewport at the Mobile Portrait breakpoint? Thanks for your help because I’m stumped!


Here is my site Read-Only: Blockchain Site

Hi @robertfdev,

To fix this, you’ll need to change the the column span of the ‘text-area’ element to 1. Here’s a screenshot: Webflow - Blockchain Dev Si...

Once you’ve done that, I’d recommend changing the ‘lets-talk_component’ to display: block and this is what it should look like in Mobile Portrait afterwards: Webflow - Blockchain Dev Si...

Hope this helps!

Hi mww. Sorry it took over a day to get back to you. Yes, your solution worked. I didn’t notice the textarea problem so that was a good catch. And I can see now why the lets-talk_component needs to have display set to block. It makes perfect sense now that I look at it. Thank you so much for your help!!!