Docs

[leehart09]

Hello!

I have added a mail chimp newsletter to my website, and I’m really happy with how it looks. However, when I’m viewing my website on a mobile device, the titles of the labels look a little squished together. Is there any code I could add that would only make changes to the way it appears on a mobile device?

I’ve attached a screenshot of how the form looks on mobile devices for you.

Website details to follow in a private mail.

Thanks,

Catherine

[leehart09]

This reply has been marked as private.

[Christopher]

Hi there,

Please find this code :

.x-subscribe-form label {
    margin: 0 0 0.375em;
    font-size: 0.85em;
    line-height: 1;
}

And update it to :

@media (min-width:767px){
.x-subscribe-form label {
    margin: 0 0 0.375em;
    font-size: 0.85em;
    line-height: 1;
}
}

Add this too :

@media (max-width:767px){
input.submit.x-btn.x-btn-transparent.x-btn-rounded {
    margin-top: 20px !important;
}
}

Hope it helps.

[leehart09]

Thanks Christopher. I’ve had a quick look around but that code didn’t jump out at me anywhere. Could you let me know where I should be looking for it? Is it in the Customiser – Custom CSS?

[Christopher]

Hi there,

Seems like it’s coming from form itself.

Please add this code:

@media (max-width:512px){
.x-subscribe-form label {
    margin: 0.375em 0 0.375em;
    line-height: 1.5;
}
input.submit.x-btn.x-btn-transparent.x-btn-rounded {
    margin-top: 20px !important;
}
} 

Hope it helps.

[leehart09]

That’s fantastic – thank you – it worked perfect!

[Thai]

You’re most welcome 🙂

[Author]

Posts