Custom CSS not working

Hey, The table.td css doesn’t make sense to me. If you are wanting to hide the border why are you adding one. Can you send a screenshot of what you are trying to achieve?

Ben

Hi Ben,

You’re right – I’m sorry for the confusion. I used your sliders to remove the separating borders (table borders) and forced a border on the outline of the whole table. I have uploaded two screenshots to show you exactly what’s happening.

Here in the customizer, it looks exactly the way it should: https://snipboard.io/aGSyZ0.jpg

Now this is what comes out in my email client (Mac Mail): https://snipboard.io/K0NUGs.jpg

I hope that clears things up?

Hey,

I tested removing the borders in the customizer controls and adding your css, I sent it to a apple mail inbox and I tested using inbox ready which runs through 80 different inboxes. I couldn’t recreate your issue. It always shows the borders removed like what you see in your customizer image.

I suggest you test with other plugins deactivated. Make sure you are not overriding any email templates.

Ben

Hi Ben,

Thanks for running those tests. I just tried to send another test email without changing anything and now, for some reason, it’s working. I only updated two plugins (Complianz and one other completely unrelated plugin). Strange.

As of now, without having done anything, it seems to work.

Thanks again !

Glad to hear things are working, @shayno90! Let us know if there’s anything else we can help with.

Kindly,

Hannah

Hello, I’m seeing a similar issue. Some CSS seems to be passed but some gets ignored.

Overwriting the padding on .email-spacing-wrap th for example doesn’t work. the CSS never gets applied. (Yes I know that field has padding controls however with the Light order table style the table lacks padding on the sides).

The following CSS also never gets applied:

/* Footer socials */
.ft-social-title {
  display: none;
}

#footersocial > tbody > tr {
  border-spacing: 10px 0px;
  text-align: center;
}

#footersocial > tbody > tr > td {
  display: inline-block;
  width: 70px !important;
}

/* 2col address on desktop */
@media (min-width: 800px) {
  #addresses > tbody {
    display: inline-block;
    margin: -2rem;
    vertical-align: top;
  }

  #addresses > tbody > tr {
    width: 47%;
    border: 2rem transparent solid;
    display: table-cell;
    height: 100%;
  }

  .address > table {
    min-height: 220px !important;
    margin-bottom: 0;
  }

  .address-container,
  .shipping-address-container {
    width: 1200px;
  }
}

There’s possibly some other things as well but these are the ones I noticed.

Hi there!

I’m sorry for the delay in getting back to you.

…however with the Light order table style the table lacks padding on the sides

Please note that email applications may not be able to render custom CSS codes. This is outside of what our products can support.

Also, Light table style is intended to have no padding on the sides. You may need to choose the Normal table style.

On the other hand, I still want to help you. Could you send us a screenshot of the layout you want to achieve?

There might be settings that can achieve it or better custom CSS code to target and make it work on email applications.

Let us know if we can assist you further.

Kind regards,
Karla

Please note that email applications may not be able to render custom CSS codes. This is outside of what our products can support.

The issue is the plugin does add CSS, but it isn’t consistent in what CSS it adds. The CSS I mentioned above is only part of the additional CSS I’ve added, yet the rest of it works (or seems to work).

Also, Light table style is intended to have no padding on the sides. You may need to choose the?Normal?table style.

I prefer the layout of the Light table excluding the padding to the sides.

There might be settings that can achieve it or better custom CSS code to target and make it work on email applications.

The CSS code is not the problem, it shows up fine in the preview, it just never gets sent. I checked the email source, it’s not a problem of the email client not reading the CSS correctly, the CSS never gets added.