Support » Plugin: Optin Forms » Responsive version does not format well

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Boris Beo

    (@brs)

    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

    Plugin Author Boris Beo

    (@brs)

    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 ……. 🙂

    Plugin Author Boris Beo

    (@brs)

    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

    Plugin Author Boris Beo

    (@brs)

    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.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Responsive version does not format well’ is closed to new replies.