I’m building a landing page that has a two column style of design - the issue is I want the form to be on one side and some copy on the other but the form looks like it’s being stretched out vertically. (attaching screenshot for reference)
Is there any way to fix this so it’s not as stretched out and proportionate to the right side column?
Hey @JTorres17, happy Wednesday!
Check the settings for the column widths in your landing page editor and ensure they are balanced. If the form looks stretched, try adjusting its width in the editor or adding custom CSS through the design manager.
To our top experts, @TomM2 and @Anton do you have any recommendations for @JTorres17?
Thank you,
Pam
Hi @JTorres17,
Would you mind sending the page URL? I’ll help to double-check the CSS and columns.
Hey @JTorres17 you should just be able to drag the area wider by hovering over the seperator and dragging the area:
If you can’t, it really depends on your template, but within a standard drag and drop editor you can move these by hovering and getting the icon with arrows on both sides, like this:
https://www.loom.com/share/d65316c28b1c4a45bd50359e6c9a420a
You can also set the “section” to be “full width” instead of “content width” if you want it to take up more space on your screen.
The form on your landing page might be stretching due to how the columns are set up. To fix this and improve alignment with the adjacent copy, define appropriate column widths. A balanced layout often uses equal widths, like 50% for both the form and copy columns. This prevents one section from overpowering the other.
If the form fields are stretching, set a max width for input fields and buttons. A value like max-width: 300px or 100% ensures they remain proportional without appearing oversized.
For advanced fixes, consider using CSS Flexbox or Grid. Flexbox can help create equal-height columns, while Grid provides precise control over layout proportions, making your design more responsive and polished.
Don’t forget to check the padding and margins around the form. Excessive spacing can disrupt proportions, so ensure no unnecessary padding or margins is inflating the layout.
Lastly, make the form responsive for smaller screens by applying CSS media queries. Adjustments like stacking columns or resizing elements ensure the form looks great on all devices.
These small tweaks will keep your form aligned with the page design, enhancing both functionality and aesthetics for a seamless user experience.
