Popup Pro - fix display problems

After much tweaking, I've finally go the plugin working with Mailchimp Sync. While it is functional, after much headache I have four issues I really hope to get help with.

1) On mobile, the image is cropped strange instead of just 'stacked' on top of the content. How can I fix this? (I would like to actually show the image instead of checking the box to not show it)

2) On desktop, once the user submits their email, the entire box shrinks to become vertically squished, and the image also literally gets squished too and looks bad. Any way to fix this? Code below to show what I've done so far to style it.

3) Once the user submits, the box should automatically go away, but it doesn't. The user has to manually close it. Can this be set to automatically happen?

4) Is there a way to set the link I added at the bottom (the one that says 'I hate fun...':wink: to actually function to close the popup? I searched but couldn't find what to use to insert to make this happen.

Thank you so much for your help. Below are the customizations I'm using so far:

#messagebox .incsub-mailchimp-submit {
	width: 100%;
	padding: 10px 0px;
	text-align: center;
	color: #fff;
	font-size: 16px;
}

/* hide first name and last name */
#messagebox .incsub-mailchimp-field-wrap:nth-of-type(1),
#messagebox .incsub-mailchimp-field-wrap:nth-of-type(2),
#messagebox #incsub-mailchimp-label-email {
	display: none;
}

/* style the email input control */
#messagebox input[name=subscription-email] {
	margin: 0px 0px 10px 0px;
	background: #f8fafa;
	padding: 20px;
	border: 1px solid #e4e9e9;
	color: #b3b3b3;
	font-size: 16px;
}

/* mailchimp messages */
#messagebox .incsub-mailchimp-updated {
	border: 0;
	margin-bottom: 50px;
	font-size: 18px;
	margin-left: 0px;
	padding: 0px;
}

#messagebox .incsub-mailchimp-updated:before {
	content: 'Success! ';
}

#messagebox .incsub-mailchimp-error {
	border: 0;
	margin-bottom: 10px;
	font-size: 18px;
}

.messagebox .incsub-mailchimp-error li {
	line-height: 20px;
}

#messagebox .incsub-mailchimp-error:before {
	content: 'Whoops! ';
}

#messagebox .wdpu-content {
    padding-bottom: 0px;
}

#messagebox .incsub-mailchimp-form {
    margin-bottom: -1em;
}

#messagebox .incsub-mailchimp-field-wrap {
    margin-bottom: 0em;
}

#messagebox .wdpu-title,
#messagebox .wdpu-subtitle {
    text-align: center;
}

@media screen and (max-width: 770px) and (min-width: 480px) {

	#messagebox .wdpu-msg {
		width: 470px;
	}

	#messagebox .wdpu-image {
		display: none;
	}

	#messagebox .wdpu-inner {
		margin: 5px;
		padding: 20px;
		background: #fff url(http://cdn.elegantthemes.com/images/truste.jpg) 20px bottom no-repeat;
	}

	#messagebox .wdpu-title {
		font-size: 32px;
		line-height: 100%;
	}

}

@media screen and (max-width: 480px) {

}

  • Milan

    Hello @TR,

    I hope you are having a good day and thanks for the posting. :slight_smile:

    On mobile, the image is cropped strange instead of just 'stacked' on top of the content. How can I fix this?

    Please paste this css code snippet to custom css editor of popup. You can find custom css editor for each popup unser Popups > Edit Popup > Custom Css .

    @media only screen and (max-width: 767px){
        #popup .wdpu-image{max-height: 322px;}
    }

    On desktop, once the user submits their email, the entire box shrinks to become vertically squished, and the image also literally gets squished too and looks bad.

    This is happening because some javascript code is detaching input box and submit button from the popup when user press signup button. To prevent this would you please paste this css code snippet to custom css area of popup.

    @media screen
      and (min-width: 1200px)
      and (max-width: 1600px)
    {
    #popup .wdpu-message {
        min-height: 307px;
    }
    }

    Once the user submits, the box should automatically go away, but it doesn't. The user has to manually close it. Can this be set to automatically happen?

    The reason behind this behaviour is again that javascript code, which forces popup to not close. To do so you need to edit some core files of MailChimp user sync plugin.

    Please do follow these steps to close popup once user submits his/her email address.

    #1) Go to wp-contents/plugins/mailchimp-sync/assets/form.js
    #2) Go to at the end of line no 37. Hit enter
    #3) Paste this code snippet there

    jQuery( '.wdpu-close' ).trigger( 'click' );

    #4) Save the file.
    #5) That's it.

    Note: Changes to core files of plugin will not be preserved when plugin gets updated. Make sure you take backup of your changes and make it again whenever plugin gets updated.

    Is there a way to set the link I added at the bottom (the one that says 'I hate fun...') to actually function to close the popup? I searched but couldn't find what to use to insert to make this happen.

    You can use this statement to close popup.

    jQuery( '.wdpu-close' ).trigger( 'click' );

    To make your link work properly you need to assign click event to anchor, then use preventDefault() method to prevent default event behavior and then finally use above code snippet to let popup closed when anchor clicked.

    Let say, suppose you have assigned anchor id as "myAnchorId" in popup content to "I don't have fun." link.

    Then closing popup when user click on this anchor you can use this jQuery snippet.

    jQuery( "#myAnchorId" ).on( "click", function( event ) {
       event.preventDefault();
       jQuery( ".wdpu-close'").trigger( 'click' );
    } );

    I hope this helps you. :slight_smile:

    Please let me know if there is anything else I can help you with.

    Best Regards,
    Milan Savaliya.

  • Milan

    Hello @TR,

    I am glad that solutions helped you. :slight_smile:

    #1) Dont' worry you've written css code in the Custom Css area of popup pro plugin, will be preserved when plugin gets updated. :slight_smile: So it is update-proof unless you remove it yourself from popup. In case if you don't know where is custom css area located in plugin, please review attached screenshot.

    Furthermore, if you want to be sure your custom css changes ( not popup pro css snippets ) preserved when you theme/plugin gets updated. You can use this nice plugin,

    https://wordpress.org/plugins/simple-custom-css/

    #2) There is nice plugin for managing javascript php code snippets.. :slight_smile:
    https://wordpress.org/plugins/code-snippets/

    Use this code snippet with above plugin. Below code snippet will automatically loads javascript code snippet at the footer area of your theme. And above plugin will make sure that your changes preserved during theme plugin updates. Please make sure that you've activated snippet after creating it with above plugin.

    add_action( 'wp_footer', 'load_anhor_closing_code' );
    
    function load_anhor_closing_code(){
    	?>
    	<script type="text/javascript">
    		jQuery(document).ready(function($) {
    			//Assuming that you've assinged "myAwesomeAnchor" text as an id to an anchor.
    			$("#myAwesomeAnchor").on('click', function(event) {
    				event.preventDefault();
    				jQuery( '.wdpu-close' ).trigger( 'click' );
    			});
    		});
    	</script>
    	<?php
    }

    I hope this helps you.

    Please let me know if there is anything else I can help you with.

    Best Regards,
    Milan Savaliya.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.