Support » Plugin: MailChimp List Subscribe Form » Make widget smaller

  • Resolved DestinyCityComics

    (@destinycitycomics)


    Hello, I would like to know how to make the widget smaller. It looks okay on my site right now but I have no idea how to tweak it to look like it fits in better.

    You can see how it looks at the bottom of my website here:
    http://destinycitycomics.com/

    I’d like the spacing between lines to be less and for the text fields to be smaller vertically.

    What would I have to do? I assume custom CSS but I’m not sure how that would work. Any help would be greatly appreciated. Thanks in advance!

    https://wordpress.org/plugins/mailchimp/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hi Destiny,

    You are on the right track, some custom CSS will be needed. Based on the description of the theme you are using (Interface) you should be able to input some custom CSS without creating a Child Theme or installing a Custom CSS plugin. So, wherever your theme allows you to enter custom CSS, try adding the following:

    .mc_form_inside input[type="text"], .mc_form_inside input[type="email"], .mc_form_inside input[type="search"], .mc_form_inside input[type="password"], .mc_form_inside textarea {
    	margin-bottom:10px;
    	padding:4px;
    }

    You can adjust the pixel values as needed to get the spacing and size that looks best to you.

    Hope this helps!

    Christi

    Thanks very much Christi, this helps a lot and you can see that I’ve updated my site already and it looks much better.

    One more question, if you look at it you can see there is a very large gap underneath the “Newsletter” heading. How would I delete that or at least decrease the space?

    Again, thanks a lot for your help on this!

    Hi Destiny,

    You’re welcome, I’m happy to help. Yes, the spacing is looking better. Here’s the CSS to remove the extra space below the Newsletter heading:

    #mailchimpsf_widget-4 h1 {
    margin-bottom:0px;
    }

    That should line the label “Email Address” up horizontally with the first line of each of the other widgets in the footer. You can of course adjust it if you want to by changing the pixel value if needed.

    Thanks!

    Christi

    Thank you so much! That looks much better!!

    I have one final spacing hang-up: the white space under “Subscribe” and above “Powered by MailChimp”

    That should clear any qualms I have with the layout. I appreciate your help on this a lot!

    Hi there Destiny,

    Looks like Christi has really helped you out! For your last question, adding this to the CSS will bring the “powered by MailChimp” closer to the “Subscribe” button. When I tested this using pixels it didn’t seem to work as reliably, which is why I’ve used em here:

    #mc_signup_submit {
    		margin-bottom: -1em;
    	}

    You could also work with the CSS for mc_display_rewards, which is what surrounds the “powered by MailChimp” item.

    -Kath

    ps, Thanks for all of your help out in this thread, Christi!

    Sweeet! This is great! Thank you so much for your help! You guys did a great job. Very satisfied!!

    Hi Destiny,

    Glad to here we were able to help. Please mark this thread as resolved if everything is taken care of now.

    Thanks!

    Christi

    OK

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Make widget smaller’ is closed to new replies.