How to remove excess space between buttons on Klaviyo embedded form

[NonaBats]

I created a Klaviyo embedded form on a Shopify page, but there's a ton of white space between the buttons when the browser is maximized. When I adjust the browser, it sometimes corrects the spaces. How do I decrease this? or make sure the spaces on the form stays the same? I've already decreased padding in Klaviyo to as small as it can be but that did not work. I also tried the solution from this post https://community.shopify.com/c/shopify-design/how-to-remove-excess-white-space-between-buttons-on-k... but also did not work.

Here's the link to the form: https://wzy5i91esrrtic4k-42467000474.shopifypreview.com/pages?preview_key=a25fed79a03597fcc1347d89c2...

[rajweb]

Hey @NonaBats ,

the white space issue could be due to the way your Klaviyo form and Shopify theme interact. Here are some steps to troubleshoot and potentially solve this issue:

Inspect the Form's CSS:

1. Open the browser’s developer tools (Right-click > Inspect or press  ctrl + shift + I on Windows ).

2. Look for the container or form fields to see if there are unnecessary margins or padding applied.

3. You can try temporarily adding the following CSS in your theme (or using the developer tools to test):

/* Remove extra padding/margin between form elements */
.klaviyo-form input,
.klaviyo-form button {
    margin: 5px 0; /* Adjust margin as needed */
    padding: 10px; /* Adjust for comfortable size */
}

.klaviyo-form {
    max-width: 100%; /* Prevent overflow issues */
}

.klaviyo-form button {
    display: block;
    width: 100%; /* Ensures consistent button size */
}

This CSS reduces the margin between the input fields and the button and ensures that the form elements align consistently across browsers and screen sizes.

Force Consistent Width and Alignment

You can wrap the form in a div with a specific width or grid layout to prevent resizing issues:

.klaviyo-form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 400px; /* Set desired form width */
    margin: 0 auto;
}

Place the klaviyo-form-wrapper class around the form in your HTML.

Disable Shopify Theme Styles from Overriding the Form:

Sometimes, the theme’s global CSS can conflict with your form. Try scoping the styles specific to the form:

.klaviyo-form * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

This ensures the form elements are not affected by global theme CSS.

Add Media Queries for Responsive Design:

Since you mentioned the space corrects when resizing the browser, the issue may be related to the layout at certain screen widths. Add this CSS to fine-tune responsiveness:

@media (min-width: 768px) {
    .klaviyo-form {
        padding: 0 20px; /* Adjust padding for larger screens */
    }
}

Let me know if any of these solutions help, or if the issue persists, I can guide you through further troubleshooting.

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

[Dan-From-Ryviu]

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

 (min-width: 1000px) {
    .prose:not(.prose--tight) :where(:not(meta, span) + *) {
        margin-block-start: 0 !important;
    }
}

[sahilsharma9515 · Accepted solution]

Hi @NonaBats Please add the below code:

<style>
@media screen and (min-width: 1000px) {
    .prose:not(.prose--tight) :where(:not(meta, span) + *) {
        margin-block-start: unset !important;
    }
}
</style>

Please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.liquid in the code in left hand side in your theme.
6. Add the following code in the bottom of the file above </body> tag

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[NonaBats]

Thank you so much, Sahil. This is an easy fix and it worked.