Rows too large

Ah I understand Horhe.

It will be a bit messy this way, but try this CSS.

.yikes-easy-mc-form-1 > label.EMAIL-label {
    width: 30% !important;
}

#yikes-easy-mc-form-1-EMAIL {
    font-size: 16px;
}

.yikes-easy-mc-form-1 > label.submit-button-inline-label {
    width: 30% !important;
    margin-left: 0;
}

Also, you currently have this CSS:

.yikes-mailchimp-container-1 .yikes-easy-mc-submit-button.yikes-easy-mc-submit-button-1 {
    width: 50% !important;
    margin-left: 25%;
    margin-right: auto;
}

Change it to this:

.yikes-mailchimp-container-1 .yikes-easy-mc-submit-button.yikes-easy-mc-submit-button-1 {
    width: 50% !important;
    margin-left: 10px;
    margin-right: auto;
}

Hope that makes sense!

All the best,
Kevin.

Hi Kevin, thanks for this but unfortunately it doesnt work. I removed all CSS and disabled inline option.

• This reply was modified 7 years, 3 months ago by Horhe.

Working on it now.

I’ve cleared my cache but I am still seeing the form as inline. Do you have a way to clear the cache on your side?

Cache deleted.

Yup I see it now.

Here you go:

.yikes-easy-mc-form-1 label {
    width: 60%;
    margin-top: 10px;
    display: inline-block;
}

.yikes-easy-mc-form-1 label > input {
    font-size: 16px;
}

.yikes-easy-mc-submit-button-1 {
    width: 20% !important;
    display: inline-block !important;
}

Do I need to enable inline option again because Email input window is full width.

Some of the styles are being overwritten. Try changing .yikes-easy-mc-form-1 label to this:

.yikes-easy-mc-form-1 label {
    width: 60% !important;
    margin-top: 10px;
    display: inline-block !important;
}

Wow now its almost perfect. Submit button is a bit smaller than label and on the mobile button is a bit offset. How to change button height to be the same as label?

Is it possible to have two rows form on mobile to avoid offset?