Product description table container mobile HELP

Product description table container mobile HELP

ecommfirst
Shopify Partner
28 0 5

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

Screenshot 2024-06-19 at 00.30.56.png

Replies 8 (8)

kazi
Shopify Partner
582 88 110

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

 

body, html {
overflow: auto;
}

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

PageFly-Richard
Shopify Partner
4394 1005 1657

Hi @ecommfirst 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
.rte__table-wrapper {
   overflow-x: scroll;
}
.rte table {
    table-layout: fixed;
    border: 1px solid #ccc;
}
</style>

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

PageFlyRichard_0-1718757909106.png

 

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.

PageFlyRichard_1-1718757967324.png

 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ecommfirst
Shopify Partner
28 0 5

Hi Richard, I have followed this but unfortunate no change Screenshot 2024-06-19 at 00.30.56.png

EBOOST
Shopify Partner
1032 274 313

Hi @ecommfirst ,

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;
}

EBOOST_0-1718758117143.png

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

Kyle_liu
Shopify Partner
84 13 14

Hi @ecommfirst 

 

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

Kyle_liu_0-1718758988786.png

 

First, you need to remove the width attribute of table

Kyle_liu_1-1718759202089.png

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

Kyle_liu_3-1718759488836.png

 

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on (liushuaicc@shinetechsoftware.com)
ecommfirst
Shopify Partner
28 0 5

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

Kyle_liu
Shopify Partner
84 13 14

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'

Kyle_liu_0-1718799171750.png

 

I hope it can be helpful to you.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on (liushuaicc@shinetechsoftware.com)

Dan-From-Ryviu
Shopify Partner
8382 1650 1661

Hi @ecommfirst 

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

<style>
@media (max-width: 749px) {
html, body { overflow-x: hidden; }
.rte__table-wrapper { overflow-x: auto; }
}
</styl>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.