Column width mobile design

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

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.

Any solution?
Thanks.

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

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 4 years, 5 months 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.

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 4 years, 5 months ago by Caoba.

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