Custom CSS

  • Resolved logichub

    (@logichub)


    4 years, 5 months ago

    I want to add left and right padding to order detail heading as shown in the screenshot:
    https://share.getcloudapp.com/X6udYbAX

    I’ve added following code in Custom CSS section:

    .email-spacing-wrap table thead tr th {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

    It is showing correctly in the mail preview screen, however, it is not correctly rendered in the received email as shown in the attached screenshot:
    https://share.getcloudapp.com/04uOr52n

    Any idea how to achieve this?

    Thank you.

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

    (@hannahritner)

    Hey @logichub,
    Sorry for the delay! Try changing your css to this:

    .email-spacing-wrap table thead tr th {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin: 0 12px !important;
}

    Does that bring some spacing back in?

    Regards,
    Hannah

    Thread Starter logichub

    (@logichub)

    Thanks for your response.

    I’ve added this code, but it didn’t fix the issue. I’ve also contacted the support on your website and they were able to fix the issue. I am reproducing the instructions here so if someone need it in the future.

    As I have imported this email template that is using the Light style for the table:
    https://ps.w.org/kadence-woocommerce-email-designer/assets/screenshot-1.jpg?rev=1883649. It added extra padding in the table header, body and footer areas.

    Solution

    • Email Settings > Content > Order Items
    • Change the ORDER TABLE STYLE to Normal from Light

    It fixed the issue though I have to added extra CSS to remove the borders.

    • This reply was modified 4 years, 5 months ago by logichub. Reason: Adjust correct URL
    hannah

    (@hannahritner)

    Thanks for sharing your solution!

    All the best,
    Hannah

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom CSS’ is closed to new replies.