Shopify Page Table is not responsive on mobile

Store Design
1

Hello,

This is the page that I need help with, specifically the table:

https://707street.com/pages/preorder-updates

On desktop view, the table fits fine.

However, on mobile, I have to scroll horizontally to view the entire table. Is there any way the table on mobile view changes its size so it fits respective of the user’s phone size? Ideally, I would like the table to fit so that “item” and “updated expected delivery date” can be seen without scrolling.

I’ve attached an image. The red marking shows how the table fits now and the green marking shows how I want it to fit respective of the phone size.

2

Hi @707Street

To fix the mobile view you can paste below CSS in theme.liquid under Layout just after
3

Hi, @707Street

You have to just set an @media screen properties so, it’ll fit to the screen width.

For mobile & tablet Screen:-

@media screen and (max-width:769px){
.rte .table-wrapper table {
table-layout: auto;
width: 100% !important;
}

}

4

Do I put this in the HTML box within Pages or within the theme code?

5

Put this code in theme.liquid

Inside tag


@media screen and (max-width:767px) {
.rte .table-wrapper table {
table-layout: auto;
width: 100% !important;
}
}