WordPress.org

Ready to get started?Download WordPress

Forums

Optin Forms
[resolved] Responsive version does not format well (9 posts)

  1. skysurfer86
    Member
    Posted 3 months ago #

    Hi, love the plug in thank you. Anything that makes things easier for the time poor is great!

    The issue I have is when viewed on my iPhone my responsive site looks good except for this optin form. Its all squashed together and parts are unreadable. Its almost unusable really. Can anything be done to make it responsive? I will try to add a link to an image shortly.

    Link to screenshot https://www.dropbox.com/s/hsa295b9w2dpp45/photo.PNG

    Thanks

    https://wordpress.org/plugins/optin-forms/

  2. Boris Beo
    Member
    Plugin Author

    Posted 3 months ago #

    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! ;)

  3. skysurfer86
    Member
    Posted 3 months ago #

    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

  4. Boris Beo
    Member
    Plugin Author

    Posted 3 months ago #

    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!

  5. skysurfer86
    Member
    Posted 3 months ago #

    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 ....... :)

  6. Boris Beo
    Member
    Plugin Author

    Posted 3 months ago #

    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? ;)

  7. skysurfer86
    Member
    Posted 3 months ago #

    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

  8. Boris Beo
    Member
    Plugin Author

    Posted 3 months ago #

    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;}
    }
  9. skysurfer86
    Member
    Posted 3 months ago #

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

    All Good! Thanks for the fix.

Reply

You must log in to post.

About this Plugin

About this Topic