Links converting to buttons in mobile

Rebecca Mandell · November 2016

Greeting,

The web and unsubscribe links in the footer of emails are converting to buttons in the mobile view. Screenshot attached. We'd like for them to remain small links, like the donate link just above them. We know we need to adjust the code somewhere, but aren't sure what needs to be changed or where to find it. Thanks in advance for your help!

Philip Nawrocki · November 2016

Hi Rebecca,

I bet this is in a media query in the style section of the e-mail. Depending on how you create e-mail, the code for this could be in the HTML or the stationary. I am assuming this is doing what you want in Outlook, gmail, etc.

You can look for code similar to this:

@media screen and (max-width: 580px)

Let us know if that helps.

Thanks,

Phil

Rebecca Mandell · November 2016

Yes, fine in desktop view.

--

Rebecca Mandell

Senior Associate, Individual Giving
Wholesome Wave

203-658-6770

Website | Newsletter Sign Up | Our Story

Philip Nawrocki · November 2016

Cool. Then definitely in the media query of your e-mail code.

Kaiyao Duan · November 2016

Hello Rebecca, the button is showing due to the use of Media Query, it can be edited in the email stationary.

The Media Query inside of the style tag has a class "a[class=emailfooternav]" that is enabling the white button, thus we have commented out that class and its associated styles.

Here is what we did: instead of deleting it, we have commented it out using "/***x.x.x.x.x.***/", this way the commented out section will no longer be functional, however if you ever decided to have the buttons back all you need to do is to delete the comment "/***" and "***/"

Here is what the code looks like now:
/******************************************

a[class=emailfooternav] {

display: block !important;

font-size: 22px !important;

font-weight: bold !important;

padding: 22px 4px 22px 4px !important;

line-height: 18px !important;

background: #ffffff !important;

color: #adb56b !important;

border-radius: 5px !important;

margin: 12px auto !important;

width: 80% !important;

min-width: 300px !important;

text-align: center !important;

}

**********************************************/

Hopefully that makes sense!

Kaiyao

Rebecca Mandell · November 2016

Very helpful, thanks! That took care of the buttons, but now we're seeing a long space underneath the footer, again, just in mobile. Screenshot attached. T
ips for cleaning that up?

Kaiyao Duan:

Hello Rebecca, the button is showing due to the use of Media Query, it can be edited in the email stationary.

The Media Query inside of the style tag has a class "a[class=emailfooternav]" that is enabling the white button, thus we have commented out that class and its associated styles.

Here is what we did: instead of deleting it, we have commented it out using "/***x.x.x.x.x.***/", this way the commented out section will no longer be functional, however if you ever decided to have the buttons back all you need to do is to delete the comment "/***" and "***/"

Here is what the code looks like now:
/******************************************

a[class=emailfooternav] {

display: block !important;

font-size: 22px !important;

font-weight: bold !important;

padding: 22px 4px 22px 4px !important;

line-height: 18px !important;

background: #ffffff !important;

color: #adb56b !important;

border-radius: 5px !important;

margin: 12px auto !important;

width: 80% !important;

min-width: 300px !important;

text-align: center !important;

}

**********************************************/

Hopefully that makes sense!

Kaiyao

Kaiyao Duan · November 2016

Thank you for pointing that out Rebecca, that is caused due to a background color in the email and the margin set as auto, what I did was to change the code in the email body from "background-color: #f5f8db; margin: auto;" to "background-color: #ffffff; margin: 0px;".

After testing it in both Gmail and Outlook on my iphone 6s the extra green space at the bottom is not there anymore. Hopefully this fix works with your device too!

Kaiyao

Links converting to buttons in mobile

Comments

Categories