Title: Mobile Width Last modified: March 31, 2020 --- # Mobile Width * Resolved [scott74](https://wordpress.org/support/users/scott74/) * (@scott74) * [6 years ago](https://wordpress.org/support/topic/mobile-width-4/) * I have a form where I have the submit button right next to the email input. * Desktop is 11:1 ration Tablet 7:1 ration and mobile 3:1 ratio * It lines up on Desktop and Tablet side by side but can’t get it to work on mobile. The mobile email input just keeps filling the entire screen. Any help appreciated. * [Here is should look on mobile](https://imgur.com/a/rIhT9WE) * PS.. When you shrink the window on desktop screen as narrow as you can make it, it works but not on the actual mobile device. * Thanks. - This topic was modified 6 years ago by [scott74](https://wordpress.org/support/users/scott74/). - This topic was modified 6 years ago by [scott74](https://wordpress.org/support/users/scott74/). * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmobile-width-4%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 11 replies - 1 through 11 (of 11 total) * Plugin Author [GusRuss89](https://wordpress.org/support/users/gusruss89/) * (@gusruss89) * [6 years ago](https://wordpress.org/support/topic/mobile-width-4/#post-12614993) * Hi [@scott74](https://wordpress.org/support/users/scott74/) * It looks like you’ve updated it to drop down to the next line on mobile. That’s probably a better solution because otherwise the email input becomes quite short. * If you still want to get them both on the one line, the issue will be fixed in the next release (you actually made me realise there is a bug that stops mobile sizing from working). * Thanks, Angus * Thread Starter [scott74](https://wordpress.org/support/users/scott74/) * (@scott74) * [6 years ago](https://wordpress.org/support/topic/mobile-width-4/#post-12617632) * ***Upsate Post Here ** After further exploring this it looks like its because I am using 3 for the email form and 1 for the submit so that the plugin puts them side by side, so the3 settings is shorting up the email field even though I am overlaying the submit with a negative left margin. Any suggestion on being able to set the email field to 4 on mobile and still overlay the submit button on the far right of it so I an take advantage of the full mobile screen.. Thank you for your help.. * ** Original Post Here **** Thank you.. it works side by side now. I made my template full width for that area which brings it over to the left right to the edge but there is a big gap on the right and would like to take advantage of the screen. * Can you tell me what I am missing here? * [https://www.loom.com/share/f8ef9de1263c489f91f3d00b45bd569f](https://www.loom.com/share/f8ef9de1263c489f91f3d00b45bd569f) * [https://tequilamex.com/home-2/](https://tequilamex.com/home-2/) * Thank’s Scott * ********** Form Code ************** [md-form spacing=”tight”] * [md-text label=”Email” icon=”” desktopwidth=”10″ tabletwidth=”6″ mobilewidth=” 3″] [email* email-785 id:firstFormEmail class:yourEmail] [/md-text] * [md-submit desktopwidth=”2″ tabletwidth=”2″ mobilewidth=”1″] [submit class:submit1“ arrow_right”] [/md-submit] * [/md-form] - This reply was modified 6 years ago by [scott74](https://wordpress.org/support/users/scott74/). - This reply was modified 6 years ago by [scott74](https://wordpress.org/support/users/scott74/). * Plugin Author [GusRuss89](https://wordpress.org/support/users/gusruss89/) * (@gusruss89) * [6 years ago](https://wordpress.org/support/topic/mobile-width-4/#post-12620327) * Hi Scott, * The way you’ve done it looks ok. If you want to overlay the button entirely you’ll need to make sure you put right padding on the email input or the text will be obscured by the button. * If you want to do the full overlay, try this. You can adjust the IDs and class names for better selectors if you like. * ``` @media (max-width: 479px) { #wpcf7-f234-p173-o1 .cf7md-submit { grid-column-start: 4; } #wpcf7-f234-p173-o1 .submit1 { margin-top: -98px; } #wpcf7-f234-p173-o1 input[type="email"] { padding-right: 100px; } } ``` * Thanks, Angus * Thread Starter [scott74](https://wordpress.org/support/users/scott74/) * (@scott74) * [6 years ago](https://wordpress.org/support/topic/mobile-width-4/#post-12623210) * Thanks.. that worked… Would a use quires with same CSS for each start device? * This works on desktop.. Wanting to make same for tablet on mobile… * ``` #wpcf7-f268-p269-o1 .cf7md-submit { grid-column-start: 12; } #wpcf7-f268-p269-o1 .submit1 { margin-top: -98px; min-height: 56px; margin-left: 5px; border-radius: 0px; } #wpcf7-f268-p269-o1 input[type="email"] { padding-right: 100px; } ``` - This reply was modified 6 years ago by [scott74](https://wordpress.org/support/users/scott74/). * Thread Starter [scott74](https://wordpress.org/support/users/scott74/) * (@scott74) * [6 years ago](https://wordpress.org/support/topic/mobile-width-4/#post-12623583) * One little hiccup see if you can help me with. When this CSS is applied it seems to want to shorten the email width on the right side and keep if from expanding the full width of the mobile screen. * I attached some images with my theme section full width and the CSS turned off and with it turned on.. Since its just overlaying , not sure why it would shorten the email input field. * [Screen shot of gap here](https://imgur.com/a/gHKFU2a) * [Page set to full width and CSS on here](https://tequilamex.com/overlay-submitt/) * [Page set to full width and CSS off here](https://tequilamex.com/css-off-form/) * [CSS code being used here](https://pastebin.com/4qLnwu7e) * Thank you again for your help - This reply was modified 6 years ago by [scott74](https://wordpress.org/support/users/scott74/). - This reply was modified 6 years ago by [scott74](https://wordpress.org/support/users/scott74/). * Plugin Author [GusRuss89](https://wordpress.org/support/users/gusruss89/) * (@gusruss89) * [6 years ago](https://wordpress.org/support/topic/mobile-width-4/#post-12625820) * Hi Scott, * Make sure your button is always the smallest it can be (1/12 desktop, 1/8 tablet, 1/4 mobile). That should be all that’s missing I think. You may need to adjust the margin sizes I gave you depending on your button width/height. * Thanks, Angus * Thread Starter [scott74](https://wordpress.org/support/users/scott74/) * (@scott74) * [6 years ago](https://wordpress.org/support/topic/mobile-width-4/#post-12627751) * AHH… I had max for the submit button but had 11,7, and 3 for the email field…. This has been a doozy to get working on all devices correctly… * For some reason I had to increase the min-height of button on mobile and the negative top margin of it. * Only thing not working and not a huge deal unless the email if long is the padding right on the email field works when you shrink the screen down on desktop to simulate smaller screen but on the actual phone the verbiage extends all the way to the end under the join now button as if its ignoring the padding. * [Current Code Here](https://pastebin.com/Sj0hfPry) * ``` [md-form spacing="tight"] [md-text label="Enter you Email Address" icon="" desktopwidth="12" tabletwidth="8" mobilewidth="4"] [email* email-785 id:firstFormEmail class:yourEmail] [/md-text] [md-submit desktopwidth="1" tabletwidth="1" mobilewidth="1"] [submit class:submit1 "JOIN"] [/md-submit] [md-raw]

Receive exclusive offers from Tequila's

[/md-raw] ``` * [/md-form] * [Website.](https://tequilamex.com/home-2/) Thanks again for your help…. * Thread Starter [scott74](https://wordpress.org/support/users/scott74/) * (@scott74) * [6 years ago](https://wordpress.org/support/topic/mobile-width-4/#post-12628687) * Weird thing is though is that I have to give that increase in – top margin on the button for the tablet and phone but those same pixel dimensions on a desktop them make the button to high…. stumped. * [https://www.loom.com/share/31d8734ee33e4f23953208abbd8ee33c](https://www.loom.com/share/31d8734ee33e4f23953208abbd8ee33c) * Plugin Author [GusRuss89](https://wordpress.org/support/users/gusruss89/) * (@gusruss89) * [6 years ago](https://wordpress.org/support/topic/mobile-width-4/#post-12629112) * Hi Scott, * The issue with the text going behind the button on mobile is because of your min-width rule in this media query. * ``` @media (max-width: 959px) and (min-width: 481px) { #wpcf7-f234-p173-o1 input[type="email"] { padding-right: 100px; } } ``` * If you get rid of `and (min-width: 481px)` that should be fine. * To ensure the button is always positioned correctly, we can take a slightly different approach. * 1. Remove the CSS I gave you previously (apart from the right padding one mentioned above). * 2. Add this CSS * ``` #wpcf7-f234-p173-o1 .mdc-layout-grid { position: relative; } #wpcf7-f234-p173-o1 .cf7md-submit-btn { position: absolute; right: 0; top: 0; bottom: 16px; } #wpcf7-f234-p173-o1 .cf7md-spinner { position: absolute; top: 15px; right: 110px; } ``` * 3. Move your explanation text to outside the [/md-form] tag. * Thanks, Angus * Thread Starter [scott74](https://wordpress.org/support/users/scott74/) * (@scott74) * [6 years ago](https://wordpress.org/support/topic/mobile-width-4/#post-12630371) * Perfect thank you. That works great and eliminated the need to guess all the media quires for aligning it on different devices. * One last question if you could give advice. I have a icon sitting on top of the form right now. I created a div around the whole form to place it. Would targeting the actual md form container be more reliable for the position of it? * I think to make it show above the form you have to apply enough top padding on the form to use it as a form background. * Reason Ii want to keep inside the form code is that I have a second form that is revealed by java script after the first one is filled in to gather more of the users info and if the image is not inside the form it stay when the second form is revealed and looks a little out of place.. * If I can find a way to keep it inside the form, it would disappear when the first form is filled out.Thank you very much again for helping figure that out. The form looks great and no media quires needed for the button. * [https://www.loom.com/share/bfd8fe1bc9214783a68bf5bf1d6c48d8](https://www.loom.com/share/bfd8fe1bc9214783a68bf5bf1d6c48d8) * Plugin Author [GusRuss89](https://wordpress.org/support/users/gusruss89/) * (@gusruss89) * [6 years ago](https://wordpress.org/support/topic/mobile-width-4/#post-12632134) * HI Scott, * It looks like you’ve updated the icon to float down the page, which is a nice touch. * If you still want to hide it then I would suggest hiding the icon with JavaScript rather than trying to get it inside the form. The email form needs to be exactly the size of the input for the button positioning to work correctly. * Thanks, Angus Viewing 11 replies - 1 through 11 (of 11 total) The topic ‘Mobile Width’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/material-design-for-contact-form- 7_f8f8f8.svg) * [Material Design for Contact Form 7](https://wordpress.org/plugins/material-design-for-contact-form-7/) * [Frequently Asked Questions](https://wordpress.org/plugins/material-design-for-contact-form-7/#faq) * [Support Threads](https://wordpress.org/support/plugin/material-design-for-contact-form-7/) * [Active Topics](https://wordpress.org/support/plugin/material-design-for-contact-form-7/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/material-design-for-contact-form-7/unresolved/) * [Reviews](https://wordpress.org/support/plugin/material-design-for-contact-form-7/reviews/) * 11 replies * 2 participants * Last reply from: [GusRuss89](https://wordpress.org/support/users/gusruss89/) * Last activity: [6 years ago](https://wordpress.org/support/topic/mobile-width-4/#post-12632134) * Status: resolved