Warning message outside the screen

I’m styling it with this code:

/* style error message mailpoet */
.formError, .formErrorContent {
	background: #FB3636 !important;
	color: white !important;
	font: inherit !important;
}

Alessio, try adding this attribute:

left: 718.17px !important;

To this class:

.formError {
  ...your other attributes...
}

Alession, a good way to know exactly what you need to change in the CSS is to use the inspector of your browser.

Here’s a video that explains how it’s used. Very practical.

I tried to add

.formError {
	left: 718.17px !important;
}

but this doesn’t make it responsive. In the mobile version (or with another laptop with different resolution) the message is outside the screen or in a wrong position.

Thank you for the video, I’m using the Inspect option and sometimes Firebug.

I just can’t find the right setting to make .formError appear on the left side of the form or at the top.
Now I’m noticing that also with the default settings, in the mobile version, the field appears outside the screen.

Alessio, our validation isn’t ideal for mobile, we agree. We’ll be changing it in the future so it works out of the box.

For the time being, you’ll want to have media queries in your css:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

oh, I’ll take a look at that for the mobile version.
But what about the desktop version? right now, the sidebar form doesn’t show the validation since it goes too far outside on the right.

is the CSS above the only way to do this workaround?

Hi Alessio,

The CSS above is the only solution for this right now, sorry.

Ok.

I’m really looking forward to see the v.3 !
I think you guys will rock!

Hi Alessio, I had the same issue (maybe not the same, but very alike).

Try to use:

.formError {
margin-top: (NN)px !important;
margin-left: (NN)px !important;
}

Just play with numbers in your browser inspector and try to find smth relevant for you issue.
Wish you a luck!