After successfully creating an email form with jquery validation error style that appears when there's an error, I encountered a problem. When the screen width is reduced or viewed on a small screen, the error message pushes down the button.
I've attempted using position: absolute and display:inline-block for the error style, but to no avail. I'm currently stuck and in need of assistance from a seasoned CSS expert.
So, how can I prevent the button from being pushed down when an error message appears on a small screen or during browser window resizing?
Here you can find the code and fiddle: http://jsfiddle.net/psbq8vkj/4/
CSS:
.error-class {
color:red; z-index:1; font-size:15px;
}
.guestlist-form.error-class {
color:red; z-index:1;
}
.guestlistfield.error-class {
position:relative; display:inline-block;
}
.guestlist-form .button {
position:relative; z-index:2;
}
input.error-class { border:3px solid red;}
input.error-class:focus { border:3px solid #f90;}
.valid-class {
color:black;
}
.emailaddress:focus, textarea:focus {
border:3px solid #f90;
}
@media (min-width:765px) {
/* Styles for wider screens */
}
@media (max-width:764px) {
/* Styles for smaller screens */
}
/* Additional styles */
.guestlistfield
{
/* Styling for guest list field */
}
/* More styles */
.form input.guestlistfield:enabled,
form select:enabled,
form textarea:enabled
{
background:#fff;
}
/* Button Style */
.button
{
/* Styling for buttons */
}
.button:focus
{
/* Focus styling for buttons */
}
.button:hover
{
/* Hover effect for buttons */
}
#updates
{
/* Styles for updates section */
}
@media (max-width:280px) {
.signuptitle {font-size:15px; color:#fff; margin-top:50px;}
}
/* Responsive design based on screen size */
HTML:
<!-- HTML markup -->
JQuery:
// JQuery validation script
$(".guestlist-form").validate({
errorClass: "error-class",
validClass: "valid-class",
rules: {
// Validation rules
},
messages: {
// Custom error messages
}
});