Support » Plugin: Kadence WooCommerce Email Designer » Column width mobile design

  • Caoba

    (@caoba)


    Hello, how could I reduce the width of the “Price” column in the layout of the mobile version? I’m using “Free Responsive Template”.

    Attached sample image:

    Image

    Thanks, greetings.

    • This topic was modified 6 months ago by Caoba.
    • This topic was modified 6 months ago by Caoba.
Viewing 11 replies - 1 through 11 (of 11 total)
  • hannah

    (@hannahritner)

    Hey,
    Sorry for the delay!
    Try adding this to your css:

    table.td th.td:last-child {
        width: 50px;
    }

    Let me know how that works for you!

    Best,
    Hannah

    Caoba

    (@caoba)

    Hi hannah,

    Yes, I have tried that code before but this only affects the design in the desktop email client, but in the mobile responsive design, everything remains the same.

    Greetings.

    Caoba

    (@caoba)

    Any solution?
    Thanks.

    • This reply was modified 6 months ago by Caoba.
    hannah

    (@hannahritner)

    Sorry for the delay! I’ll pass this to the developer to see if he has a solution for you.
    Thanks for your patience!

    Hannah

    What device and inbox are you targeting?

    I tweaked that a little and ran a test through emails on acid. Iphones respond to this:

    .email-spacing-wrap table.td .td:last-child {
        width: 50px;
    }

    Ben

    Hello Ben,

    Thanks for you answer.

    I am using the gmail app on an iPhone.

    I have noticed that this problem only occurs in the email “On Hold” and “Completed”, in others it appears correctly.

    Within email personalization, when I send a test email of the status “On Hold” or “Completed”, it appears fine. The problem appears when an order is placed and the email “On Hold/Completed” is sent.

    Thanks,
    Greetings.

    • This reply was modified 5 months, 4 weeks ago by Caoba.

    I add to the previous message that I am using the plugin together with “Advanced Shipment Tracking for WooCommerce”, which as I have seen, is compatible with your plugin.

    hannah

    (@hannahritner)

    Hey,
    I just want to confirm, did you test the css that Ben provided? Did you experience any change after adding?

    Hannah

    Hello, no, everything remains the same, although as I said, it only happens in some types of email, I attach 1 screenshot, where it looks good and where it looks bad.

    Image

    The email on the left belongs to the “On-Hold” state, the email on the right belongs to the “Processing” state.

    The problem is only when viewing the email in the mobile version, in the desktop email everything looks perfect.

    Thanks, greetings.

    • This reply was modified 5 months, 3 weeks ago by Caoba.
    hannah

    (@hannahritner)

    Thanks for the screenshot! I’ll send this to the developer and see if he knows how to get this aligned as you’re wanting.

    Best,
    Hannah

    Hey,
    You have one long word: “Transferencia/Ingreso”

    A table won’t break a word in half by default so that work is forcing the column to expand.

    If you really want to break a word then you need to update the css to this:

    .email-spacing-wrap table.td .td:last-child {
        width: 50px;
        word-break: break-word;
    }

    I hope that helps and explains.

    Ben

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.