sorry, here’s a page on my site that shows the issue: http://ourworshipsound.com/form-test/
I can try to download the base theme and see if I can figure it out. Technically, since the display is wholly dependent on the theme, I’d punt this away as a theme issue.
Have you tried setting the width to 100% on the submit button?
Thanks for your response, Brandon. When I set the width to 100%, it completely covers the email field because the button continues to appear on the same level as that field.
gsimusic,
Adding the following to your style.css should bring the sign up button underneath the email field and make it look like it belongs there:
.enews-widget input[type="submit"] {
border-radius: 3px;
margin: 16px 0 0;
position: relative;
width: 80%;
}
.enews-widget input[type="submit"]:hover {
border-color: #fff;
}
Alternatively, modify lines 909 and 922 of your style.css with those rules.
John, thanks so much! That worked great for my sidebar. I had to add margin-bottom: 16px; to the previous field to get the button spaced properly, but it’s perfect now.
I do also have the same widget used on my homepage, which in Centric is a parallax design. The Submit button is still showing up to the right of the email field. Any ideas?
Thanks again
You’re welcome.
Adding display: block; to the code in my previous post should drop that submit button below the email field. From there you’d need to decide how you want it to line up and look. If it were me, I’d probably reduce the width of the name and email fields…
great, one step closer – that did drop it down to the next line. Now, the button shows up farther left than the input fields. How can I center it?
Also, I would certainly like reduce the field width. Width is currently set to 80%, which I need for the sidebar placement. How can I set the width differently for the version on the homepage.
Thanks so much for your help!
Try this; it should be fully responsive too.
.home-widgets .home-widgets-5 .widget {
text-align: left;
}
.home-widgets-5 .enews .widget-title {
margin-bottom: 0;
}
.home-widgets-5 .enews {
margin: 0 auto;
max-width: 90%;
width: 400px;
}
.home-widgets-5 .enews input {
width: 100%;
}
.home-widgets-5 .enews input[type="submit"] {
width: 200px;
}
