How to move mailpoet submit button on the form

Hi Johannes,

Preface: This CSS will only work for Johannes.

Oh. Sorry! I was under the impression that you were just linking a reference site. It should be noted that the reason why the button is being placed on a different line is due to the text field being too large. Meaning there’s not enough room for the button.

You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

@media (max-width: 339px){	#msg-form-wysija-shortcode572f7d189385e-1 .wysija-paragraph {		width: 55% !important;	}	#msg-form-wysija-shortcode572f7d189385e-1 .wysija-submit-field {		padding: 0 10px !important;	}}

You might also need to install the SiteOrigin CSS Editor.

Hi Johannes,

You need to install the SiteOrigin CSS Editor plugin to be able to view that page. Once installed, just paste the CSS and it’ll work as desired even at lower resolutions.

Hi Johannes,

I was worried that was going to happen. The hex, msg-form-wysija-shortcode572f7d189385e looks to be regenerated very often and thus my CSS (set up to work for msg-form-wysija-shortcode572f7d189385e which is no longer present) doesn’t work. Please replace the previous CSS with:

@media (max-width: 339px){
	.home .wysija-paragraph {
		width: 55% !important;
	}

	.home .wysija-submit-field {
		padding: 0 10px !important;
	}
}

Hi Johannes,

Ah. Right, okay. Sorry, I was focusing on mobile devices rather than larger resolution tablet devices (hence the 339px). Please add the following CSS. Please replace the previous CSS with the following CSS. This will cover both tablet and mobile devices.

@media (max-width: 797px){
	.home .wysija-paragraph {
		width: 55% !important;
	}

	.home .wysija-submit-field {
		padding: 0 10px !important;
	}
}