Title: Column width mobile design
Last modified: June 1, 2020

---

# Column width mobile design

 *  [Caoba](https://wordpress.org/support/users/caoba/)
 * (@caoba)
 * [6 years ago](https://wordpress.org/support/topic/column-width-mobile-design/)
 * 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](https://i.imgur.com/agUU6MN.png)
 * Thanks, greetings.
    -  This topic was modified 6 years ago by [Caoba](https://wordpress.org/support/users/caoba/).
    -  This topic was modified 6 years ago by [Caoba](https://wordpress.org/support/users/caoba/).

Viewing 11 replies - 1 through 11 (of 11 total)

 *  [hannah](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [6 years ago](https://wordpress.org/support/topic/column-width-mobile-design/#post-12934747)
 * 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
 *  Thread Starter [Caoba](https://wordpress.org/support/users/caoba/)
 * (@caoba)
 * [6 years ago](https://wordpress.org/support/topic/column-width-mobile-design/#post-12934781)
 * 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.
 *  Thread Starter [Caoba](https://wordpress.org/support/users/caoba/)
 * (@caoba)
 * [6 years ago](https://wordpress.org/support/topic/column-width-mobile-design/#post-12941396)
 * Any solution?
    Thanks.
    -  This reply was modified 6 years ago by [Caoba](https://wordpress.org/support/users/caoba/).
 *  [hannah](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [6 years ago](https://wordpress.org/support/topic/column-width-mobile-design/#post-12944165)
 * 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
 *  Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [6 years ago](https://wordpress.org/support/topic/column-width-mobile-design/#post-12944430)
 * 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
 *  Thread Starter [Caoba](https://wordpress.org/support/users/caoba/)
 * (@caoba)
 * [6 years ago](https://wordpress.org/support/topic/column-width-mobile-design/#post-12948604)
 * 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 6 years ago by [Caoba](https://wordpress.org/support/users/caoba/).
 *  Thread Starter [Caoba](https://wordpress.org/support/users/caoba/)
 * (@caoba)
 * [6 years ago](https://wordpress.org/support/topic/column-width-mobile-design/#post-12948916)
 * 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](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [5 years, 12 months ago](https://wordpress.org/support/topic/column-width-mobile-design/#post-12963338)
 * Hey,
    I just want to confirm, did you test the css that Ben provided? Did you
   experience any change after adding?
 * Hannah
 *  Thread Starter [Caoba](https://wordpress.org/support/users/caoba/)
 * (@caoba)
 * [5 years, 12 months ago](https://wordpress.org/support/topic/column-width-mobile-design/#post-12982034)
 * 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](https://prnt.sc/szacn4)
 * 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 years, 12 months ago by [Caoba](https://wordpress.org/support/users/caoba/).
 *  [hannah](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/column-width-mobile-design/#post-12993950)
 * 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
 *  Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/column-width-mobile-design/#post-12995315)
 * 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)

The topic ‘Column width mobile design’ is closed to new replies.

 * ![](https://ps.w.org/kadence-woocommerce-email-designer/assets/icon-256x256.png?
   rev=3115863)
 * [Kadence WooCommerce Email Designer](https://wordpress.org/plugins/kadence-woocommerce-email-designer/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/kadence-woocommerce-email-designer/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/kadence-woocommerce-email-designer/)
 * [Active Topics](https://wordpress.org/support/plugin/kadence-woocommerce-email-designer/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/kadence-woocommerce-email-designer/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/kadence-woocommerce-email-designer/reviews/)

 * 11 replies
 * 3 participants
 * Last reply from: [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * Last activity: [5 years, 11 months ago](https://wordpress.org/support/topic/column-width-mobile-design/#post-12995315)
 * Status: not resolved