Responsive version does not format well

Hi skysurfer86,

I checked out the screenshot.

To fix this, add the following code in the Custom CSS field (you’ll find it under Optin Forms > Form tab > Form Options section):

@media only screen and (min-width: 768px) and (max-width: 959px) {
#optinforms-form2-title-container {display:block;width:100%;margin:0 0 10px;}
#optinforms-form2-email-field-container {width:70%;}
#optinforms-form2-button-container {width:28%;}
#optinforms-form2-disclaimer-container {width:100%;margin:0;}
#optinforms-form2-disclaimer{margin:10px 0 0;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#optinforms-form2-title-container {display:block;width:100%;margin:0 0 10px;}
#optinforms-form2-email-field-container {width:70%;}
#optinforms-form2-button-container {width:28%;}
#optinforms-form2-disclaimer-container {width:100%;margin:0;}
#optinforms-form2-disclaimer{margin:10px 0 0;}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
#optinforms-form2-title-container {display:block;width:100%;margin:0 0 10px;}
#optinforms-form2-email-field-container {width:70%;}
#optinforms-form2-button-container {width:28%;}
#optinforms-form2-disclaimer-container {width:100%;margin:0;}
#optinforms-form2-disclaimer{margin:10px 0 0;}
}

Let me know if it works out! ??

Hi Boris

Thank you for the solution. It looks great and almost right. The only thing that doesn’t format properly now is the subscribe button. The label I have on it says “Subscribe Me!” But it doesn’t fit on the button in the mobile version.

See here for what it looks like now https://www.dropbox.com/s/tf0qkwy61yi1c61/Photo%2029-04-2014%2010%2039%2011%20pm.png

Thanks again

Sorry about that, it looked great on my iPhone ??

Try this code instead:

@media only screen and (min-width: 768px) and (max-width: 959px) {
#optinforms-form2-title-container {display:block;width:100%;margin:0 0 10px;}
#optinforms-form2-email-field-container {width:70%;}
#optinforms-form2-button-container {width:28%;}
#optinforms-form2-disclaimer-container {width:100%;margin:0;}
#optinforms-form2-disclaimer{margin:10px 0 0;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#optinforms-form2-title-container {display:block;width:100%;margin:0 0 10px;}
#optinforms-form2-email-field-container {width:70%;}
#optinforms-form2-button-container {width:28%;}
#optinforms-form2-disclaimer-container {width:100%;margin:0;}
#optinforms-form2-disclaimer{margin:10px 0 0;}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
#optinforms-form2-title-container {display:block;width:100%;margin:0 0 10px;}
#optinforms-form2-email-field-container {display:block;width:100%;}
#optinforms-form2-button-container {display:block;width:100%;margin:0;}
#optinforms-form2-disclaimer-container {width:100%;margin:0;}
#optinforms-form2-disclaimer{margin:10px 0 0;}
}

Let me know if it’s good now!

Don’t apologise, I understand how it goes!

Now it looks awesome with phone in portrait orientation. The subscribe button is perfectly placed under the enter email field and is full width. Looks great.

However ?? when I turn the phone to landscape mode the subscribe button is to the side and too small still. I can upload a pic if you need it.

So close ……. ??

Sure, forgot about landscape ??

@media only screen and (min-width: 768px) and (max-width: 959px) {
#optinforms-form2-title-container {display:block;width:100%;margin:0 0 10px;}
#optinforms-form2-email-field-container {width:70%;}
#optinforms-form2-button-container {width:28%;}
#optinforms-form2-disclaimer-container {width:100%;margin:0;}
#optinforms-form2-disclaimer{margin:10px 0 0;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#optinforms-form2-title-container {display:block;width:100%;margin:0 0 10px;}
#optinforms-form2-email-field-container {display:block;width:100%;}
#optinforms-form2-button-container {display:block;width:100%;margin:0;}
#optinforms-form2-disclaimer-container {width:100%;margin:0;}
#optinforms-form2-disclaimer{margin:10px 0 0;}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
#optinforms-form2-title-container {display:block;width:100%;margin:0 0 10px;}
#optinforms-form2-email-field-container {display:block;width:100%;}
#optinforms-form2-button-container {display:block;width:100%;margin:0;}
#optinforms-form2-disclaimer-container {width:100%;margin:0;}
#optinforms-form2-disclaimer{margin:10px 0 0;}
}

This should fix that. Am I right? ??

Thanks for the real time responses.

Here’s how it looks in landscape with that latest code

https://www.dropbox.com/s/u02mrr8fva8jnhk/Photo%2029-04-2014%2011%2035%2016%20pm.png

Okay, let’s do this ??

@media only screen and (min-width: 768px) and (max-width: 959px) {
#optinforms-form2-title-container {display:block;width:100%;margin:0 0 10px;}
#optinforms-form2-email-field-container {display:block;width:100%;}
#optinforms-form2-button-container {display:block;width:100%;margin:0;}
#optinforms-form2-disclaimer-container {width:100%;margin:0;}
#optinforms-form2-disclaimer{margin:10px 0 0;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#optinforms-form2-title-container {display:block;width:100%;margin:0 0 10px;}
#optinforms-form2-email-field-container {display:block;width:100%;}
#optinforms-form2-button-container {display:block;width:100%;margin:0;}
#optinforms-form2-disclaimer-container {width:100%;margin:0;}
#optinforms-form2-disclaimer{margin:10px 0 0;}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
#optinforms-form2-title-container {display:block;width:100%;margin:0 0 10px;}
#optinforms-form2-email-field-container {display:block;width:100%;}
#optinforms-form2-button-container {display:block;width:100%;margin:0;}
#optinforms-form2-disclaimer-container {width:100%;margin:0;}
#optinforms-form2-disclaimer{margin:10px 0 0;}
}

Sorry, I didn’t see your latest post until just now, I didn’t get the email notification.

All Good! Thanks for the fix.