Thread Starter
steigw
(@steigw)
It’s not just the submit button, it’s the entry field for an email address. It also goes full width and should be sized down.
I appreciate your help
Hi @steigw,
Do you know how to add custom CSS to your page? The following CSS will cut the email address and submit button sizes to half the width.
#yikes-easy-mc-form-2-EMAIL {
width: 50%;
}
.yikes-easy-mc-submit-button-2 {
width: 50% !important;
}
You can adjust the % parameter as you like. Is this what you’re looking for?
Cheers,
Kevin.
Plugin Contributor
Tracy Levesque
(@liljimmi)
🏳️🌈 YIKES, Inc. Co-Owner
Hi Steigw,
You have a few options to add CSS code:
- If you’re using WordPress 4.7 or higher, you can go to Appearance > Customize > Additional CSS and place the code there.
- If you created this theme yourself, you can just add it to your style.css file
- If you’re using a theme you downloaded or bought you can make a child theme and add the code to your child theme’s style.css file
- Your theme may have a “Custom CSS” option. If it does, then you can just pop it in there.
- You can use a plugin like Simple Custom CSS or Jetpack and enter the code in their Custom CSS area
Thank you!
-Tracy
Plugin Contributor
Tracy Levesque
(@liljimmi)
🏳️🌈 YIKES, Inc. Co-Owner
You can also apply a width to the entire form which will keep both the field and the button at the same width.
.yikes-mailchimp-container.yikes-mailchimp-container-2 {
width: 50%;
}
Additionally we have a Customizer add-on which will allow you to style your forms any way you like without needing to know any code.
Thank you!
-Tracy
Thread Starter
steigw
(@steigw)
this is all very helpful. Thank you! But how would I apply different percentages for different viewing form factors? I would need to be able to say 50% of desktops; 60% of tables; 100% of smartphones.
Plugin Contributor
Tracy Levesque
(@liljimmi)
🏳️🌈 YIKES, Inc. Co-Owner
Hi Steigw,
You would need to use media queries for that.
For example:
/* ipad portrait */
@media screen and (max-width: 768px) {
.yikes-mailchimp-container.yikes-mailchimp-container-2 {
width: 60%;
}
}
/* iPhone 6 Big portrait */
@media screen and (max-width: 414px) {
.yikes-mailchimp-container.yikes-mailchimp-container-2 {
width: 100%;
}
}
Thread Starter
steigw
(@steigw)
Here’s what I came up with from the above guidance and seems to work for all but mobile:
/* Desktop */
#yikes-easy-mc-form-2-EMAIL {
width: 50%;
}
.yikes-easy-mc-submit-button-2 {
width: 20% !important;
}
/* tablet */
@media screen and (max-width: 768px) {
.yikes-easy-mc-form-2-EMAIL {
width: 50%;
}
@media screen and (max-width: 768px) {
.yikes-easy-mc-submit-button-2 {
width: 20% !important;
}
/* mobile */
@media screen and (max-width: 414px) {
.yikes-easy-mc-form-2-EMAIL {
width: 100%;
}
@media screen and (max-width: 414px) {
.yikes-easy-mc-submit-button-2 {
width: 100% !important;
}
on mobile, email address window is still at 50% and I’d like it to be 100%. Could you please correct my errors?
-
This reply was modified 9 years, 4 months ago by
steigw.
Plugin Contributor
Tracy Levesque
(@liljimmi)
🏳️🌈 YIKES, Inc. Co-Owner
Hi there.
I cleaned it up a little bit. Having more specificity on the button selector will make the !important unnecessary. Please give this a try. Thank you!
/* Desktop */
#yikes-easy-mc-form-2-EMAIL {
width: 50.%;
}
.yikes-easy-mc-submit-button.yikes-easy-mc-submit-button-2 {
width: 20%;
}
/* tablet */
@media screen and (max-width: 768px) {
.yikes-easy-mc-form-2-EMAIL {
width: 50%;
}
.yikes-easy-mc-submit-button.yikes-easy-mc-submit-button-2 {
width: 20%;
}
}
/* mobile */
@media screen and (max-width: 414px) {
.yikes-easy-mc-form-2-EMAIL {
width: 100%;
}
.yikes-easy-mc-submit-button.yikes-easy-mc-submit-button-2 {
width: 100%;
}
}
Plugin Contributor
Tracy Levesque
(@liljimmi)
🏳️🌈 YIKES, Inc. Co-Owner
Our pleasure.
Have a good day!
-Tracy
Thread Starter
steigw
(@steigw)
One thing I should add, is there a way to set a minimum width? So it just wan’t shrink any smaller?
Hi @steigw,
You can use the CSS min-width: property (http://www.w3schools.com/cssref/pr_dim_min-width.asp). There is also a max-width property.
Cheers,
Kevin.
