[NSFW] Changing field and button width in tablet/mobile

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!

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!

You’re welcome.