I’m embedding a Klaviyo form into my Shopify store using the Klaviyo app block. I chose the custom size option (450x200px) instead of full-width, because I want the form fields to remain centered and not stretch across the entire screen.

The layout is exactly how I want it — except the background color of the form block does not stretch full width on the live site. It leaves white margins on both sides, even though I’ve tried applying CSS like these bellow:

.klaviyo-form-container {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background-color: #f0f5fa;
}

<!--OR THIS-->
.klaviyo-form-container {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background-color: #f0f5fa;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
<!--OR THIS-->
.klaviyo-form-container {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background-color: #f0f5fa;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

This works in the Shopify theme editor, but not on the live site, likely because the form is rendered inside an iframe.

I’m not able to add custom classes or edit the .liquid file of this section since it’s generated by the app.

What I want:

• Keep the form at a fixed, centered size (450px wide)

• Make the background of the block stretch 100% of the screen width

Question:

Is there a way to achieve this layout using Klaviyo’s embedded block, without switching to full-width form mode (which stretches the fields too)? Or is there a workaround to target the block’s background outside the iframe?

Thanks in advance!