+2I'm trying to align buttons and text blocks in a Klaviyo popup to match a design mockup. However, when I adjust the padding for one block, it affects the positioning of others, making it difficult to achieve the exact layout I want.
Is there a better way to control individual block positioning without affecting the rest of the design? Any tips or workarounds would be greatly appreciated!
Best answer by emma.owens
Hi
To clarify, is your second screenshot an image of what the form looks like published on your site? Or is this within the Klaviyo editor?
It appears this may be on your site - if that is the case, then this is likely being caused by the forms CSS conflicting with your site’s custom CSS. If you are able to send over the URL of your website, I can take a further look!
+15Hey
Split Layout: Opt for a split layout. Place your desired image on the right-hand side (exactly half cropped image of your mockup in your case)
Background Setup: Use the mockup image removing all the elements and left align it.
Add Elements: Insert image block(for logo), text blocks, the email input box, and the CTA button on the left side. Customize each block separately for colors, fonts, and padding to match your design.
Adjust Padding: Adjust the padding for each element to align them properly without affecting others. This will help you get each component just right, according to your mockup.
Preview and Adjust: Always preview your design on different devices. Make any necessary adjustments to ensure it looks great everywhere.
Go Live: Test the popup, and if all looks good as you have desired, launch it!
This should help you achieve the layout you're aiming for without the hassle. Let me know if you run into any problems. Cheers!
Hi,
Could you try to split the total button/image padding and apply half to the text area and half to the text block
+16Hi
To clarify, is your second screenshot an image of what the form looks like published on your site? Or is this within the Klaviyo editor?
It appears this may be on your site - if that is the case, then this is likely being caused by the forms CSS conflicting with your site’s custom CSS. If you are able to send over the URL of your website, I can take a further look!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
