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