How can I adjust table column width for mobile view only?

Store Design
1

Hi,

Please can someone assist.

I would like to change the column width for tables so that they autofit the text. This should be for mobile view only.

See screenshot below for example.

Thanks in advance!

www.electricrideco.com

IMG_9819.PNG
IMG_9819.PNG1125×2436 188 KB

1 Like
2

@guyv

sorry for that issue can you please share this product url

3

@KetanKumar

Hi!

Here is a link to a product: https://electricrideco.com/products/aeboard-at2-720w-all-terrain-electric-skateboard

If you scroll down to the product description it’s the SPECIFICATIONS tab.

Please note: I would like this change to apply to all tables in the product descriptions for all products. Mobile view only.

Thanks!

4

@KetanKumar

Hi, are you able to assist with this?

1 Like
5

@guyv

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.rte__table-wrapper table {
    width: 100% !important;
}
1 Like
6

Hi @guyv ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
@media (max-width: 767px) {
    .rte__table-wrapper table {
        width: 500px !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
7

@KetanKumar

@AvadaCommerce

Thanks for your solutions! Much appreciated!

2 Likes
8

@guyv

its my pleasure to help us