How To Fix An Overflow Horizontal Scrolling On Mobile

Design help General
1

Hi,

I’ve been having trouble with a page. There are custom embedded html tables inside of a rich text block that are causing horizontal scrolling on some mobile devices. The issue is related to some mobile devices.

It only is occurring as a result of some of the embedded tables, not all of them.

I tried by putting the rich text block as overflow hidden which stopped the horizontal scrolling on mobile devices but it causes some parts of the words and the edges of the table to not be seen.

Any help would be greatly appreciated.

Here is my site Read-Only Link to the page in question: https://preview.webflow.com/preview/deepsail-new?utm_medium=preview_link&utm_source=designer&utm_content=deepsail-new&preview=eabe21639eb419c88c322a8c9046eec1&pageId=63177e78aaea8403cd915ab2&workflow=preview

Here is published url link: https://deepsail-new.webflow.io/best-boats-under-100k

Here is a screenshot of the horizontal scrolling issue on mobile viewport ( you can see the white gap in top right-hand corner)

image0 (2)
image0 (2)1170×2532 142 KB

And here is a screenshot of how it looks when I set the rich text block to overflow hidden on mobile device. It causes some words and part of the table to be cut off:

image0
image01170×2532 402 KB

2

Hi @Paul112 the issue is related to a long string in this case benningtonmarine.com. As its do not wrap. There are several solutions to solve your issue you can:

  1. shortening words to remove.com
  2. create a new table for mobile only everything will be in one column mean title and description will be under each other (one <tr> will contain <td>)and use media-queries to show/hide table on desired viewport width
3

Thank for sharing this. i got my problem solved.