Re: Product description table container mobile HELP

ecommfirst · ‎06-18-2024

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 · ‎06-18-2024

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 · ‎06-18-2024

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

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

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

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

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

ecommfirst · ‎06-18-2024

Hi Richard, I have followed this but unfortunate no change

EBOOST · ‎06-18-2024

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

- 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 ❤❤Coffee tips

Kyle_liu · ‎06-18-2024

Hi @ecommfirst

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;

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 · ‎06-19-2024

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

Kyle_liu · ‎06-19-2024

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.

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 · ‎06-19-2024

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!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Re: Product description table container mobile HELP

Product description table container mobile HELP

Community Blog Articles