Title: Responsive version does not format well Last modified: August 21, 2016 --- # Responsive version does not format well * Resolved [skysurfer86](https://wordpress.org/support/users/skysurfer86/) * (@skysurfer86) * [12 years, 1 month ago](https://wordpress.org/support/topic/responsive-version-does-not-format-well/) * 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](https://www.dropbox.com/s/hsa295b9w2dpp45/photo.PNG) * Thanks * [https://wordpress.org/plugins/optin-forms/](https://wordpress.org/plugins/optin-forms/) Viewing 8 replies - 1 through 8 (of 8 total) * [Boris Beo](https://wordpress.org/support/users/brs/) * (@brs) * [12 years, 1 month ago](https://wordpress.org/support/topic/responsive-version-does-not-format-well/#post-4856357) * 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! 😉 * Thread Starter [skysurfer86](https://wordpress.org/support/users/skysurfer86/) * (@skysurfer86) * [12 years, 1 month ago](https://wordpress.org/support/topic/responsive-version-does-not-format-well/#post-4856362) * 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](https://www.dropbox.com/s/tf0qkwy61yi1c61/Photo%2029-04-2014%2010%2039%2011%20pm.png) * Thanks again * [Boris Beo](https://wordpress.org/support/users/brs/) * (@brs) * [12 years, 1 month ago](https://wordpress.org/support/topic/responsive-version-does-not-format-well/#post-4856363) * 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! * Thread Starter [skysurfer86](https://wordpress.org/support/users/skysurfer86/) * (@skysurfer86) * [12 years, 1 month ago](https://wordpress.org/support/topic/responsive-version-does-not-format-well/#post-4856367) * 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 ……. 🙂 * [Boris Beo](https://wordpress.org/support/users/brs/) * (@brs) * [12 years, 1 month ago](https://wordpress.org/support/topic/responsive-version-does-not-format-well/#post-4856369) * 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? 😉 * Thread Starter [skysurfer86](https://wordpress.org/support/users/skysurfer86/) * (@skysurfer86) * [12 years, 1 month ago](https://wordpress.org/support/topic/responsive-version-does-not-format-well/#post-4856370) * 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](https://www.dropbox.com/s/u02mrr8fva8jnhk/Photo%2029-04-2014%2011%2035%2016%20pm.png) * [Boris Beo](https://wordpress.org/support/users/brs/) * (@brs) * [12 years, 1 month ago](https://wordpress.org/support/topic/responsive-version-does-not-format-well/#post-4856371) * 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;} } ``` * Thread Starter [skysurfer86](https://wordpress.org/support/users/skysurfer86/) * (@skysurfer86) * [12 years, 1 month ago](https://wordpress.org/support/topic/responsive-version-does-not-format-well/#post-4856411) * 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. * ![](https://ps.w.org/optin-forms/assets/icon-256x256.png?rev=998391) * [Optin Forms - Simple List Building Plugin for WordPress](https://wordpress.org/plugins/optin-forms/) * [Frequently Asked Questions](https://wordpress.org/plugins/optin-forms/#faq) * [Support Threads](https://wordpress.org/support/plugin/optin-forms/) * [Active Topics](https://wordpress.org/support/plugin/optin-forms/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/optin-forms/unresolved/) * [Reviews](https://wordpress.org/support/plugin/optin-forms/reviews/) ## Tags * [format](https://wordpress.org/support/topic-tag/format/) * [iphone](https://wordpress.org/support/topic-tag/iphone/) * [mobile](https://wordpress.org/support/topic-tag/mobile/) * 8 replies * 2 participants * Last reply from: [skysurfer86](https://wordpress.org/support/users/skysurfer86/) * Last activity: [12 years, 1 month ago](https://wordpress.org/support/topic/responsive-version-does-not-format-well/#post-4856411) * Status: resolved