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.
