I am using a mailchimp subscription form. The problem does not happen until I style it so I am not sure if this is a mailchimp or X issue. Please let me know. I have been able to make this work for me but it only work at 3 device levels properly: xl / s / xs.
My problem is at the middle levels. At medium the name and emails fields extend out past the form and the button text remains constant but the text is cut off.
At large it almost works but the fields for name and email extend to the edge of the form.
Please let me know if you can help me with this.
John
Hi @johnhansen033,
Thanks for writing in.
Add this in your custom CSS:
#optin input.email{
width:100%
{
#optin input.name{
width:100%
}
Let us know how it goes.
Thanks.
Pre-20170927:
The suggestion made the entry fields fit within the graphic but a lot of things still do not work properly:
XL: Both entry-field boxes ok / placeholder text ok Submit button ok / button text ok
LG: Both entry-field boxes extend outside graphic / text looks ok Submit button looks ok / text is not responsive and truncated/cut off
MD: Both entry-field boxes extend outsid graphic more / text ok in relation to box size but extends outside graphic as well Submit button ok / text not responsive and truncated/cut off
S: Grey graphic box has lost the extended bars top and bottom / entry fields are centered and ok Submit button is centered and text is ok
XS: Grey graphic box has lost the extended bars top and bottom / text ok in relation to box size but extend outside graphic Submit button is centered / text is truncated / cut off / not responsive
20170926: After Support suggestion for width:100% in CSS
XL: Both entry-field boxes are fitting in graphic but too long / it works but I liked it the way it was designed before Submit button looks to be fine
LG: entry field boxes now fit but placeholder text is not centered Submit button looks ok / text mot responsive and is truncated/cut off
MD: entry field boxes are now within the graphic / text not responsive and cut off Submit button is ok but small / text is not responsive and cut off
S: Grey graphic box has lost extended bars top and bottom but all other fields look ok
XS: Grey graphic box has lost extended bars top and bottom / input entry-field boxes ok / text ok but could be centered Sunmit button ok / text not responsive/cut off
The only thing the 100% did was to fit the entry fields into the graphic which works for every level except XL where the entry field is now too large
nothing has changed with unresponsive text in any input field or submit buttons that were not working
Appreciate your input
Hi there,
How did you add that CSS? I can’t find it anywhere from your site, but I also tried and it works even on smaller devices. And please provide some screenshots on how it should be in different devices.
Thanks!
I am totally confused by your answer. It really only works in the XL format. This is the way it was designed and I am happy with it ( Example A ) I tried and removed the CSS suggested by nico because ( Example AA ) the fields were too large. It did contain the fields within the graphic but that was not what I wanted. I need to be able to control the size and placement of the field boxes as well as the placeholder text.
In the LG format, ( example B ) even with Nico’s CSS the button remains nonresponsive.
Format MD ( example C ) the field boxes are ok but now the placeholder text is cut off and not responsive and the Button continues to be nonresponsive.
Format S ( example D ) everything works but field boxes are too large and placeholder text could be centered. The extended bars at the top and bottom of the graphic have disappeared. I guess I can live without but like the look and would like to understand why they disappeared.
Finally Format XL ( example E ) the field boxes work but could be tweaked. The Button is again unresponsive and the extended bars top and bottom are also missing.
I realize that some of this has to do with the section element being 1/3 2/3 but even if I need to create a different instance for each device I need to know how to accomplish this. I have tried a number of suggestions through the forum with no success.
The CSS in use to format the form is the following:
/the following code is to format the mailchimp optin subscription form/
#optin {
background: #393939 url(images/dark.png) repeat-x top;
border: 3px solid #111;
color: #fff;
padding: 30px 20px;
text-align: center;
}
#optin input {
border: 1px solid #111;
font-size: 15px;
margin-bottom: 0px;
padding: 8px 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 2px 2px #111;
-moz-box-shadow: 0 2px 2px #111;
-webkit-box-shadow: 0 2px 2px #111
}
#optin input.email { background: #fff url(images/email.png) no-repeat 10px center; padding-left: 35px; width: 100%; }
#optin input.name { background: #fff url(images/name.png) no-repeat 10px center; padding-left: 35px; width: 100%; }
#optin input[type=“submit”] {
background: #960e17 url(images/red.png) repeat-x top;
border: 1px solid #111;
color: #fff;
cursor: pointer;
font-size: 25px;
font-weight: 8px 0;
text-shadow: -1px -1px #3a060a;
width: 70%
}
#optin input[type=“submit”]:hover { color: #ffa5a5 }3
As far as you seeing that it works on all devices, I don’t understand how that is possible. I do not have the luxury of having twenty devices to test these things. I am relying on YOUR software to change from one device to another to see the results.
I would appreciate your assistance on this.
Whatever you need just ask
Thanks
Sorry looks like screen shots did not go through
Here it is:
Thats nice. I spent an hour putting together a image doc with 6 examples so you could see what I am talking about since you only allow me a single screen shot and it looks like you restrict the size of the file. Thanks so much. I will try to send them through individually.Hope that is not breaking some rule
Hi There,
Unfortunately this amount of customization would be out of the scope of our support.
We recommend you hiring a developer to assist you with the job.
You can find many X specialists on our Facebook Group X Theme Users or in a service like UpWork.
Thanks for understanding!
I am sorry but your response is really not acceptable. It is much too easy to say the customization is out of your scope. Can you please explain why? On the surface this seems like simple styling. Lets make this simple.
- Why is the submit button consistently working but the text is not responsive?
- If I can make the field boxes 100% width with CSS, how can I make it 100% at smaller devices and 75% at larger devices.
- What is the determining code to make changes at different device levels for the form?
I have tried variations of the @media code with no success. How can I control the styling for these forms at different levels.
I am sorry but I cannot afford a developer whenever something moderately difficult comes up. I am sure many of your clients feel the same way. If you can’t, or won’t help me, at least help with direction. The above questions seem to be pretty basic and doable. If not, I would like to ask for an explanation as to why. I have seen your support staff give extremely detailed directions for issues that I don’t understand and make my head swim. This seems like some fundamental changes that almost anyone might need to accomplish.
Thanks
Hi there,
We don’t really provide customization, what we provide are just some snippets and it’s from our end (support) as a bit of help and not officially from X. Hence, we can’t really support any customization or to any custom code out there. We’re only limited to bug and feature support. Plus, that form is not from us, it’s an embedded form code directly from MailChimp so you may want to contact them too 
And sorry for the confusion about my previous reply. I mean that the provided CSS is working on all devices even on smaller one
#optin input.email{
width:100%
{
#optin input.name{
width:100%
}
And, I can’t find it anywhere on your site so I’m not sure how you added it.
I checked your screenshots and I also tried doing a bit of workaround but it’s not working due to the existing structure of the form. And it will be a lot of customization if you’re trying to make it responsive since it’s not, it’s like repeating the features of what’s already been there (our email forms addon). How about trying our own Email forms addon? Then maybe we can help a bit since it has a simpler structure.
Thanks!