When the popup looks correct in the preview, but on your website it doesn’t look the same, then most likely some of your website CSS code is unintentionally affecting our popups CSS. In a few words, CSS is a set of styles that define how websites (or our popups) look like!

Sometimes, though, your website CSS might conflict with ours - this is usually by applying CSS rules that are too generic (for example, rules that cover all buttons, or all elements of a certain type), which affects elements in your popups as well.

Fortunately, in most cases, it can be easily fixed by inspecting the problematic element (using Chrome inspector tool), and trying to identify the CSS that is breaking the design. You could do this by unchecking the rules that could contribute to the style break.

Once the problematic style is identified, we normally advise to overwrite that CSS with a correct one by prepending the rule with .wisepops-popup selector and either add it directly to your website, or pasting it into the Popup > CSS section in your Wisepops editor.

If you need assistance with locating or fixing the CSS conflict, we will be glad to help!