Center issue

  • Resolved dresstive

    (@dresstive)


    8 years, 11 months ago

    Hey guys,

    I tried to make it so that the text in the newsletter is centered. It works perfectly fine, however once I actually click in the box (focus mode) it jumps around as is no longer centered. We have tried adding :focus to the CSS, but it does not seem to fix the problem. I am not sure what is interfering.

    Is there any chance you could take a look and help us out? We love Mailchimp.

    You can see the newsletter on our site https://loverne.dk. It is in the absolute bottom of the site to the right. We are talking about the text upon clicking in the fields:

    Indtast navn (this is name)
    Indtast email (this is email)

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Lap

    (@lapzor)

    8 years, 11 months ago

    Hi,

    You need to set the input fields to: max-width: 100%;

    Hope that helps!

    Thread Starter dresstive

    (@dresstive)

    8 years, 11 months ago

    Hey.

    Thank you so much for answering (and so fast even) gotta love Mailchimp. We tried that, but it doesn’t seem to work. Maybe we are targeting the wrong ID’s or? Here is our entire CSS for Mailchimp:

    /* Mailchimp */

    .mc4wp-form-basic input[type=”text”], .mc4wp-form-basic input[type=”email”], .mc4wp-form-basic input[type=”tel”], .mc4wp-form-basic input[type=”url”], .mc4wp-form-basic input[type=”date”], .mc4wp-form-basic select, .mc4wp-form-basic textarea, .mc4wp-form-theme input[type=”text”], .mc4wp-form-theme input[type=”email”], .mc4wp-form-theme input[type=”tel”], .mc4wp-form-theme input[type=”url”], .mc4wp-form-theme input[type=”date”], .mc4wp-form-theme select, .mc4wp-form-theme textarea {
    width: 100%; text-align: center !important;
    background: #393939;
    color: #fff;
    max-width: 100% !important;
    }

    .mc4wp-form-basic button, .mc4wp-form-basic input[type=”submit”], .mc4wp-form-basic input[type=”button”], .mc4wp-form-theme button, .mc4wp-form-theme input[type=”submit”], .mc4wp-form-theme input[type=”button”] {
    width: 100%; text-align: center !important;
    background: #48B99A;
    padding: 13px;
    font-weight: 700;
    font-size: 12px;
    }

    .mc4wp-form-basic button:hover, .mc4wp-form-basic input[type=”submit”]:hover, .mc4wp-form-basic input[type=”button”]:hover, .mc4wp-form-theme button:hover, .mc4wp-form-theme input[type=”submit”]:hover, .mc4wp-form-theme input[type=”button”]:hover { background: #3fa68b; }

    .mc4wp-form-basic input[type=”text”]:focus, .mc4wp-form-basic input[type=”email”]:focus, .mc4wp-form-basic textarea:focus, .mc4wp-form-theme input[type=”text”]:focus, .mc4wp-form-theme input[type=”email”], .mc4wp-form-theme textarea:focus {
    background-color: #393939 !important;
    color: #fff;
    border-color: #d5d5d5;
    max-width: 100% !important;
    }

    .mc4wp-form-basic, .mc4wp-form-basic input, .mc4wp-form-basic label, .mc4wp-form-theme, .mc4wp-form-theme input, .mc4wp-form-theme label { margin-top: 5px !important; }

    Plugin Contributor Lap

    (@lapzor)

    8 years, 11 months ago

    How about

    .mc4wp-form input { max-width: 100% !important; }

    Please note we are not MailChimp, we are Ibericode and make plugins like MailChimp for WordPress.

    I can’t give any further support on custom CSS as those are things that would be solved by using our Premium add-on / style builder and it’s outside the scope of our support in the first place. Hope you understand!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Center issue’ is closed to new replies.