WooCommerce Downloads Page Not Mobile Friendly in X Theme

[fsyingc]

We’re developing a site for a client with WooCommerce plugin integration for eCommerce purchases of downloading digital files.

X Theme’s interpretation of the WooCommerce default Downloads tab within a user’s Account page is not mobile friendly. The Download buttons are scrolled off the side of the page and they aren’t visible to the user.

What would you suggest we do to address this issue so that the page is mobile responsive?

Additional site specific information to be provided in private comment below.

Thank you!

[ruenel]

Hello @fsyingc,

Thanks for writing in! This usually happens because there aren’t any spaces to display the contents of each column. To resolve this, we need to collapse the columns. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media (max-width: 979px){
  .woocommerce .shop_table,
  .woocommerce .shop_table tbody,
  .woocommerce .shop_table tr {
    display: block;
    width: 100%;
  }
  
  table.shop_table_responsive thead {
      display: none;
  }
  table.shop_table_responsive tr td {
      display: block;
      text-align: left;
      clear: both;
      float:  none;
  }

  table.shop_table_responsive tr td::after, table.shop_table_responsive tr td::before {
      content: '';
      display: table;
  }

  table.shop_table_responsive tr td::after {
      clear: both;
  }

  table.shop_table_responsive tr td[data-title]::before {
      content: attr(data-title) ": ";
      font-weight: 600;
      float: right;
  }
}

We would loved to know if this has work for you. Thank you.

[fsyingc]

Worked perfectly - thanks for the speedy response!

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.