Product description table container mobile HELP

[DASCPA]

Hi All, Im not sure this is possible, My table in the product description is overflowing on mobile, see below screenshot.

Theme: Trade. This is effecting product page on mobile.

https://www.affluentarchives.co.uk/products/versace-blue-polo-mediu

[kazi_1]

Hello @DASCPA add this css in assets > base.css

body, html {
overflow: auto;
}

[PageFly-Richard]

Hi @DASCPA

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

You will have scroll bar for table, and the page will not have extra spacing

To enhance the professionalism and uniqueness of your site, I recommend setting a favicon. This can be easily done in the theme settings. Adding a favicon will help make your store stand out to customers.

Hope this can help you solve the issue

Best regards,

Richard | PageFly

[EBOOST]

Hi @DASCPA ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code
2. Assets/base.css
3. Add code below to end of file

.product__description  .rte__table-wrapper {
    overflow: auto;
    padding: 10px 1px;
}

[DASCPA]

Hi Richard, I have followed this but unfortunate no change

[Kyle_liu]

Hi @DASCPA

If the figure below meets your expectations, you need to follow the steps below,

First, you need to remove the width attribute of table

Secondly, modify base.css to change the padding: 1em; of line 417 to padding: 0.2em;

[DASCPA]

Hello, where can I remove the width attribute from? thank you

[Dan-From-Ryviu]

Hi @DASCPA

Please add this code to theme.liquid file, after in Online Store > Themes > Edit code

[Kyle_liu]

If you cannot find the width attribute of the table, you can try another way,
Modify line 3100 in the base.css file and add ‘width: auto;’ to the ‘. rte table’

I hope it can be helpful to you.