Width issue with contact form

[bartenderonduty]

Hi Themeco Team,

I’m running into issues with a contact/newsletter signup form built in Ninja Forms. When I add the form shortcode to a text element, it doesn’t span the width of the element, even when the element width and form is set to 100%. There’s always space to the right of the button, as shown in the screenshot. I contacted the form developer and they said this is an issue with the container, but I’m having trouble finding the cause of this.

Can you please take a look and suggest steps I can take to resolve this and allow the form to span the entire width of the container?

Also, besides adding padding/margin, what’s the best way to add space between the columns and keep them from running together when the browser is resized? I don’t see an option for adding a gap.

Thank you!

[ruenel]

Hello @bartenderonduty,

Thanks for writing in!

Your Ninja Form column or cell settings is 60%/40%.

See the secure note Image 1.

The width of the “Subscribe” button is auto and this is why it does not go as wide as the 40% container.

Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:

Dev Tools demo

Using the Dev Tool, you will get this:

See the secure note Image 2.

You can copy the CSS code and change the width from auto to 100%. Place the final CSS code in your Cornerstone > Theme Options > CSS so that it will be applied to the form present on the page of your site.

See the secure note Image 3

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

[bartenderonduty]

Thank you, @ruenel —I added 100% to the button and it worked!

Would you also be able to provide guidance on my second question from above?

@bartenderonduty

besides adding padding/margin, what’s the best way to add space between the columns and keep them from running together when the browser is resized? I don’t see an option for adding a gap.

[prakash_s]

Hello @bartenderonduty,

To add the space between the columns you need to go to the Row —>Layout —>Gap Width

You need to click on the Gap Width to set the responsive gap for all the breakpoints .

Hope it helps
Thanks

[bartenderonduty]

Ah, OK—I was missing the row! Just added it and found the gap settings.

Thank you!

[prakash_s]

Hello @bartenderonduty,

I have cropped the URL from the screenshot and replaced it.

Thanks

[bartenderonduty]

Hi @prakash_s,

I was referring to the ones from @ruenel. Can you check again?

Thank you!

[ruenel]

Hey @bartenderonduty,

No problem. Those were moved to the secure note already.

Cheers.

[bartenderonduty]

Thank you for all your help!

[tristup]

Hi @bartenderonduty,

Glad that we are able to help you.

Thanks