Mobile Width

Hi @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

***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://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 “<i class=’material-icons’>arrow_right</i>”]
[/md-submit]

[/md-form]

• This reply was modified 4 years, 7 months ago by scott74.
• This reply was modified 4 years, 7 months ago by scott74.

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

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 4 years, 7 months ago by scott74.

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

Page set to full width and CSS on here

Page set to full width and CSS off here

CSS code being used here

Thank you again for your help

• This reply was modified 4 years, 7 months ago by scott74.
• This reply was modified 4 years, 7 months ago by scott74.

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

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

[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]
<p style="margin: -20px 10px 0; font-size: 14px;">Receive exclusive offers from Tequila's</p>
[/md-raw]

[/md-form]

Website.
Thanks again for your help….

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

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

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

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