Keep the fields on the same line when in mobile

Hi jdprice,

sorry for the delay in response, I’ve been away for a few days. I will look into this first thing tomorrow and update you on the issue. Thanks for understanding!

Hi jdprice,

edit your form and replace the Custom CSS code field with the following code:

#optinforms-form1-subtitle{display:none;}#optinforms-form1-disclaimer{display:none;}#optinforms-form1-title{display:inline;float:left;width:28%;margin: 8px 2% 15px 5%;}
#optinforms-form1-name-field-container,#optinforms-form1-email-field-container{width:18%;}
@media only screen and (min-width: 768px) and (max-width: 959px) {
#optinforms-form1-title,#optinforms-form1-name-field-container,#optinforms-form1-email-field-container{width:100%;!important;text-align:center!important;display:block!important;float:none!important;}#optinforms-form1-name-field,#optinforms-form1-email-field{width:100%!important;}#optinforms-form1-button{margin-bottom:10px!important;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#optinforms-form1-title,#optinforms-form1-name-field-container,#optinforms-form1-name-field,#optinforms-form1-email-field{width:100%!important;text-align:center!important;display:block!important;float:none!important;}#optinforms-form1-email-field-container{width:100%;!important;}#optinforms-form1-name-field,#optinforms-form1-email-field{width:100%!important;}#optinforms-form1-button{margin-bottom:10px!important;}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
#optinforms-form1-title,#optinforms-form1-name-field-container,#optinforms-form1-name-field,#optinforms-form1-email-field{width:100%!important;text-align:center!important;display:block!important;float:none!important;}#optinforms-form1-email-field-container{width:100%;!important;}#optinforms-form1-name-field,#optinforms-form1-email-field{width:100%!important;}#optinforms-form1-button{margin-bottom:10px!important;}
}
#optinforms-form1{padding: 15px 3% 0px 15px;}

Let me know if it works ??

Hi Boris,
It looks better, but that isn’t what I was trying to do. I would like the name and email fields to be smaller and be on the same line. Like this.

Title
Name | Email
Button

Hi jdprice,

add this code to your Custom CSS field:

#optinforms-form1-subtitle,#optinforms-form1-disclaimer{display:none;}#optinforms-form1-title{display:inline;float:left;width:28%;margin: 8px 2% 15px 5%;}
#optinforms-form1-name-field-container,#optinforms-form1-email-field-container{width:18%;}
@media only screen and (min-width: 768px) and (max-width: 959px) {
#optinforms-form1-title{width:100%;!important;text-align:center!important;display:block!important;float:none!important;}#optinforms-form1-name-field-container,#optinforms-form1-email-field-container{width:50%;!important;text-align:center!important;display:inline!important;float:left!important;}#optinforms-form1-name-field{width:99%!important;margin-right:1%!important;}#optinforms-form1-email-field{width:99%!important;margin-left:1%!important;}#optinforms-form1-button{margin-bottom:10px!important;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#optinforms-form1-title{width:100%;!important;text-align:center!important;display:block!important;float:none!important;}#optinforms-form1-name-field-container,#optinforms-form1-email-field-container{width:50%;!important;text-align:center!important;display:inline!important;float:left!important;}#optinforms-form1-name-field{width:99%!important;margin-right:1%!important;}#optinforms-form1-email-field{width:99%!important;margin-left:1%!important;}#optinforms-form1-button{margin-bottom:10px!important;}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
#optinforms-form1-title{width:100%;!important;text-align:center!important;display:block!important;float:none!important;}#optinforms-form1-name-field-container,#optinforms-form1-email-field-container{width:50%;!important;text-align:center!important;display:inline!important;float:left!important;}#optinforms-form1-name-field{width:99%!important;margin-right:1%!important;}#optinforms-form1-email-field{width:99%!important;margin-left:1%!important;}#optinforms-form1-button{margin-bottom:10px!important;}
}
#optinforms-form1{padding: 15px 3% 0px 15px;}

Perfect! Thank you so much. 1 quick question about Optin Lock. Does it support Lead Magnets?

Hi jdprice,

yes it does ??