Docs

[bt_sass]

Hi there. I am creating a Modal Popup on my site and all looks good in the preview area, but when I go to the live site the formatting is different than what is displayed on the preview, even after clearing all caches. I have attached screenshots to show what I mean (Production screenshot is the wrong formatting, Preview screenshot is the desired formatting). Could you assist in getting the live site to look like the preview? Thanks!

Site details to follow in a private message.

[bt_sass]

This reply has been marked as private.

[Thai]

Hi Alex,

Please add the following CSS under Customizer > Custom > CSS:

.cp-overlay.cp-open .cp-modal {
text-align: center;
}

Hope it helps 🙂

[bt_sass]

That worked great for centering the text, thank you!

Now, how should I adjust the spacing between the “Welcome to biopryn.com!” and the text below, and the text and the button, to make it look like the preview?

Thank you so much for the help so far!

[Rue Nel]

Hello Alex,

Thanks for the updates! This is what I am seeing:
http://prntscr.com/awfwwx
http://prntscr.com/awfx6g

Since you have installed a caching plugin SG Cache Press and Cache Enabler, please clear your plugin cache first before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Hope this helps.

[bt_sass]

Hi there! I have cleared my caching and it has not changed the view of the popup on the production site. I have attached the screenshots that you gave me with some adjustments showing how the spacing is a little off – preview version that you attached is the good version, production version that you attached is the bad version. You probably understood this, just confirming :)!

As you’ll notice, with the preview everything is spaced out well and looks good. With the production, even after caching has been cleared and/or disabled, the spacing is not correct. I have put arrows in the screenshots pointing to what I mean. I can certainly control the spacing via the custome CSS (as we are doing with centering) but I wanted to try to show what was going on to let you and ConvertPlug see the WYSIWYG preview doesn’t seem to quite be functioning as intended, and also to render assistance if you are interested in trying to get to the bottom of this more.

It certainly is possible there is a conflicting plugin – I’ve not gone that far yet to determine if this is the case – but I am using ConvertPlug on another site with an almost identical setup and on that site the preview view matches the production view, unlike this site.

At any rate, I’ll do some CSS to control the spacing where I’ve indicated on the screenshots I need more. If you are wanting to do some more digging to see why the preview doesn’t match the production, I’m willing to give you access and help out in any way I can with that. If not, no worries. You can mark this as solved, if you do not want to do some more troubleshooting.

Thank you for the great support, as always!

[Jack]

Hi there Alex,

Thanks for writing back!

That certainly is odd that the preview doesn’t render the same as it does when the modal is live. And on your other site, the preview matches what displays live?

Would it be possible to get access to that other install so I can compare settings etc? 🙂

Thank you!

[bt_sass]

This reply has been marked as private.

[Rad]

This reply has been marked as private.

[bt_sass]

This reply has been marked as private.

[Rad]

Hi Alex,

I disabled all cache related plugins and it seems the spacing on both live and preview are now the same. Please note that it’s responsive which may appear slightly different on each device or screen width.

You can also see the font size is changing since it’s responsive.

Please check and let me know.

Thanks!

[bt_sass]

Removing all cache plugins did solve the problem. I did some more troubleshooting and narrowed the issue down to the Better WordPress Minify plugin – when it is activated there are issues, when it is not, everything works well.

The solution to make all play well together was to add the CSS of particular modal that I had created in ConvertPlug to the ‘Styles to NOT minify’ box in the Manage Enqueued Files tab of the BWP Minify plugin.

Thanks for the assistance, I appreciate it.

[Joao]

You are welcome!

[Author]

Posts