How to fix page content overflow issue

[itslaura123]

Theme: Ritual 3.2.1

I have this spreadsheet that I copied and pasted from an excel. It is overflowing to the right side of the edge on mobile. It looks ok on desktop. Is there any way to fix it? I do not wish to hide any of the information in the spreadsheet. Possibly can make the character size a bit smaller so they can all fit into the mobile width? I also do not wish to change the template of page in theme editor as other pages will use the template.

Please check screenshots below.

Your help will be appreciated. Thanks.

[Mustafa_Ali]

Hi @itslaura123 Welcome To Shopify Community So An Excel-pasted table won’t respond to mobile automatically since it’s just a fixed HTML table without responsive CSS applied. Without touching the page template, you can wrap the table in a scrollable container using an HTML block instead of the rich text editor — go to the page’s content, switch to “Show HTML” (the < > icon in the editor toolbar), wrap your existing table in a div like this:

<div style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
  <table>
    <!-- your existing table content stays exactly as is -->
  </table>
</div>

This makes the table horizontally scrollable on mobile instead of overflowing off-screen, and every column stays fully visible and readable, no data hidden and no font shrinking needed. It won’t affect any other pages since it’s scoped to this one page’s content, not the theme template. please do not forget to like and mark it solution

[itslaura123]

Hi there, thanks for the reply. The table was scrollable (from left side to right side) previously. I added the div but nothing changed. Still two columns are invisible on mobile, and require scrolling to the right side to view.

[Taha_Dev]

Hi @itslaura123,

The wrapper didn’t change anything because Ritual already puts tables inside a sideways-scrolling box. That’s the scrolling you had before. To get every column to fit on a phone, the table itself has to be allowed to shrink: smaller text, less padding, and no fixed column widths (Excel adds those when you paste).

This only affects this one page, and the template stays as it is:

1. Open the page, click the < > (Show HTML) button, and change the opening tag of the div you added to:

<div class="fit-table">

Keep the closing </div> right after </table>, then save.

2. Go to Online Store > Themes > Customize > Theme settings (gear icon) > Custom CSS, paste this and save:

@media screen and (max-width: 749px) {
  .fit-table table { table-layout: fixed; width: 100% !important; font-size: 12px; }
  .fit-table col, .fit-table th, .fit-table td { width: auto !important; white-space: normal !important; }
  .fit-table th, .fit-table td { padding: 6px 4px !important; overflow-wrap: break-word; }
  .fit-table tr, .fit-table thead { text-transform: none !important; }
}

The last line turns off the all-caps header on mobile, which is a big part of why “Shifter Compatible Adapter Size” is so wide. Desktop doesn’t change, and pages without the fit-table div aren’t affected.

With 5 columns on a small phone, 12px is about as big as the text can be and still fit. If it’s still tight, try 11px or shorten that last header to “Adapter Size”. If the class disappears from the HTML after you save, let me know and I’ll give you a version that doesn’t need it.

[Ploqo]

Hi @itslaura123

Before

After

Steps

1. Go to Online Store.
2. Click Edit theme.

3. Click Theme settings (the gear icon).

4. Open Custom CSS.

5. Paste this code in the box:

@media screen and (max-width: 749px) {
  .rte table {
    table-layout: auto !important;
    width: 100% !important;
  }
  .rte table col {
    width: auto !important;
  }
  .rte table th,
  .rte table td {
    width: auto !important;
    font-size: 12px !important;
    padding: 6px 4px !important;
  }
}

6. Click Save.

Only phones change. Desktop stays the same, and the page template is untouched.

Tested on a Ritual store.

Regards,
Ploqo