Plugin Author
WPKube
(@wpkube)
Hi @nakitafox
By default the form switches the inputs and the button to full width on display lower than 960 pixels, due to less space being available.
If I understood correctly, you want to keep them all in one row on tablet and mobile as well, correct?
You can do that by adding this CSS:
#optinforms-form1-name-field-container,
#optinforms-form1-email-field-container,
#optinforms-form1-button-container {
display: inline;
float: left;
width: 37%;
margin: 0 2% 0 0;
}
#optinforms-form1-button-container {
margin: 0;
width: 20%;
}
Thank you, although that isn’t quite what I meant, sorry! Although that does look good on tablet, I don’t like how it looks on mobile, I prefer the original on mobile.
Preferably, and what I meant originally, was that I’d like to have the inputs and button stacked in one column, (ie one item per line) but alter their width/add padding to the left and right – but only to the inputs and button. I’d still like the title/disclaimer text to be full width.
I’d like to be able to do this for both tablet and mobile. I hope this makes sense!
Plugin Author
WPKube
(@wpkube)
Hi @nakitafox
Ah, I understand.
Remove the code I mentioned previously and use this:
@media only screen and (max-width: 959px) {
#optinforms-form1-name-field-container,
#optinforms-form1-email-field-container,
#optinforms-form1-button-container {
max-width: 100%;
width: 330px;
margin-left: auto;
margin-right: auto;
}
}
That’s perfect, thank you so much!
