Too wide for my sidebar!

I’ve tried adding some styles to my WP stylesheet as recommended in some other threads I’ve found, but so far none of these changes seems to have altered the form one bit.

You can look at one of the pages using the widget at https://www.mennoniteusa.org/publications/on-the-way/on-the-way-vol-1-no-9/ You should be able to see the form in the right sidebar sticking way out over the edge of the column.

Any help would be appreciated.

Hey Chris!

Thanks for getting in touch. I was able to take a look at your site and experiment a bit. It looks like because of the way the #sidebar CSS is set up in your theme, you’ll need to override the <div> areas within the MailChimp widget specifically with a bit more specificity. Adding this to your theme’s CSS should do the job:
#sidebar #mc_signup_form div {width: 110px;}

Let us know if you need anything else!
-Gabe

Thanks for responding!

I added #sidebar #mc_signup_form div {width: 110px;} to the theme CSS, but it didn’t seem to change anything. Is there something else in the CSS I need to change/remove? I had put some stuff into the code based on suggestions I saw in the WP forums. Specifically:

#mc_signup_form .mc_input {width: 140px; }
#mc_signup_form {width: 140px;}
.mc_form_inside {width: 150px;}

Would I need to remove any of those things?

Hi Chrisrahe,

Looking at this again, it seems that the problem might be with the div in your side bar. You can remove the css that you mentioned above. Let me explain what’s happening here. In your site’s css, the width and background image/color are applied to all divs in the sidebar. Our plugin uses divs to wrap the elements in the form. So there are a few styles you need to add to the target just the form divs in the sidebar.

First the div that wraps the form needs to be targeted and it’s width needs to be adjusted. Then the form element needs to have a width that’s less than 180px to fit in the sidebar. Add this bit of css to do that.

#sidebar div#mc_signup, #sidebar form#mc_signup_form {
    width: 150px;
}

Then you need to remove the background color and padding from div elements in the signup form. Modify the css the MC_Gabe suggested earlier to do that.

#sidebar #mc_signup_form div {
    width: 150px;
    padding: 0;
    background: none;
}

Also your input elements seem to be a little small. If you want to adjust them, this css can do that.

#sidebar #mc_signup input[type=text] {
    padding: 10px;
    width: 130px;
    margin-left: 0;
}

You can add this all in one chunk replacing the css that you added earlier. Let us know if you have any other questions.

Thanks!

-mc_d

Thanks for all the help. As you can see at https://www.mennoniteusa.org/publications/on-the-way/on-the-way-vol-1-no-9/, we’re getting closer, but the form is still looking kind of funky.

Hey Chrisrahe,

After taking a look at the site, it looks like the CSS file being used still contains the CSS you mentioned in your previous post rather than the CSS recommended by mc_dominic. I’m still seeing this present in the CSS:

/* Theme Sidebar Elements  */

#sidebar #mc_signup_form .mc_input {width: 110px; }
#sidebar #mc_signup_form {width: 110px;}
.mc_form_inside {width: 110px;}
#sidebar #mc_signup_form div {width: 110px;}

Whereas, per mc_dominic’s instructions, things should click into place if that’s replaced by:

/* Theme Sidebar Elements  */

#sidebar div#mc_signup, #sidebar form#mc_signup_form {
    width: 150px;
}
#sidebar #mc_signup_form div {
    width: 150px;
    padding: 0;
    background: none;
}
#sidebar #mc_signup input[type=text] {
    padding: 10px;
    width: 130px;
    margin-left: 0;
}

I’m using a managed host and I guess I needed to purge the cache on their server. It’s not perfect, but acceptable now.

Thanks for all your help!