Zipwhip Widget CSS Styling

Height and Width

The recommended size for the widget iframe is 400x600 px:

<iframe src="https://embed.zipwhip.com" width="400px" height="600px"></iframe>

Rather than defining a fixed height and width for the iframe, you can set each to 100%, provided that the parent container has a minimum size of at least 400x600px.

<div style="width:400px,height:600px">
  <iframe src="https://embed.zipwhip.com" width="100%" height="100%"></iframe>
</div>

iframe border

By default, iframes will insert an ugly beveled border. You can turn it off by appening a frameborder="0" parameter to the src url:

<iframe
  src="https://embed.zipwhip.com"
  width="400px"
  height="600px"
  frameborder="0"
></iframe>

Or you can override the default iframe styling in a CSS stylesheet like so:

iframe {
  border-style: none;
}

The widget itself has no borders, which allows you to control the styling. If you want to add a solid 1px light gray border around the widget, for example, you can add that to your CSS stylesheet like so:

iframe {
  border: solid 1px #aaa;
}