Formatting size chart table on sizing page

[codyranae]

Hi all,

I need to format a sizing chart on one specific page for the mobile view. I created a page template and the table using the pages feature. It comes up perfectly on desktop but elongates width wise on mobile and I’d like to fit it to the page. I’ve tried all methods of editing the CSS file and I’m getting no changes.

Template:

Desktop:

Mobile: (need to change)

Please help! We’re launching the site in a week and this is the last thing to be fixed.

queertraditions.com

pw: payqueerpeople

[webwondersco]

Hey @codyranae ,

Hope you are doing well.

Please add one wrapper div to your size table with class name “table-responsive”. so after doing this it’ll looks like this

after that add the

.table-responsive{
overflow: auto;
padding: 5px;
}
.table-responsive table{
min-width:100% !important;
}

and if you want to manage the width of the table then add the width property with your desire value in table CSS.

below CSS to your base.css file.

[codyranae]

THANK YOU SO MUCH! (For other’s, I’ll add what I did below)

Click into the HTML code of the page, add the code:

And then add the code at the end

Then from there, go to your “Edit Code” section in your theme, find your “base.css” file and add this CSS code at the bottom.

.table-responsive{
overflow: auto;
padding: 5px;
}
.table-responsive table{
min-width:100% !important;
}

[webwondersco]

@codyranae , yes perfect!