I’m working with some product pages that don’t need product images. These pages use gravity forms that are integrated through an add-on plugin. Right now the forms are only taking up half the page width which looks really bad and cramped.
My website uses an old theme that can’t be upgraded easily without breaking things. This means I can’t use the newer block editor features to fix the layout.
Is there a way to remove the image area and make the form use the full page width? Can this be done with just CSS modifications? I need the form to look better by using all the available space instead of being squeezed into a narrow column.
I encountered the same issue with my outdated theme, and it was really frustrating to see the gravity forms not utilizing the full width of the page. The solution I found was surprisingly simple. You can adjust the CSS by overriding the container’s styles. Look for the div surrounding the form, which is often labeled as .product-content or .entry-content. You can set the form’s wrapper to full width with this: .gform_wrapper { width: 100% !important; max-width: none !important; } and make sure the form container is also set to full width: .your-form-container { width: 100%; float: none; }. Just inspect your page elements to identify the right classes, and sometimes you might need to override the theme’s grid settings as well. These simple CSS tweaks worked for me without any theme file changes.