How to fix Size Chart table on Pop-up for Mobile

Store Design
, ,
1

Hey

I have added Size Chart as Pop-up to my product page which is connected to a page. Now when I view it in mobile, it doesn’t show the size chart properly. Can someone please help me in this? i have tried the already available guides but they are not working in my case. I want to show the complete table on mobile and desktop

Link: www.mariasajjad.com

Password: tozaiy

Product Link: Maria Sajjad

Theme: Dawn Version 15.3.0

I have added a screenshot of how it appears on mobile

Screenshot 2025-09-02 152354
Screenshot 2025-09-02 152354506×973 76 KB

1 Like
2

Hi @StudioMS,

The issue is happening because the pop-up container on mobile has a fixed width and doesn’t allow the size chart table to resize or scroll properly. That’s why you only see part of the table.

You can fix this with a bit of CSS to make the table responsive and scrollable on smaller screens. Add the following code to your base.css (or custom CSS in the theme editor):

/* Make size chart table responsive inside popup */
.size-chart table {
  width: 100% !important; /* use full popup width */
  border-collapse: collapse;
}

.size-chart table th,
.size-chart table td {
  white-space: nowrap; /* keep text in one line */
  padding: 8px;
}

/* Enable horizontal scrolling if table is wider than popup */
.size-chart {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 749px) {
  .size-chart table {
    font-size: 14px; /* adjust text size for mobile */
  }
}
  1. On desktop: the full table will show normally.
  2. On mobile: users can either see the table resized or scroll sideways to view all columns, instead of the table being cut off.
3

Hey

Thank you for the detailed response

I tried adding this code on base.css file and on custom css dropdown tab but it’s not making any difference. What could be the issue?

4

Hello @StudioMS

This usually happens because the size chart table is wider than the mobile screen, so the popup doesn’t scale or scroll properly. You’ll want to make the table responsive with CSS so it shows completely on both desktop and mobile.

Try adding this to your theme’s Custom CSS (Online Store → Themes → Customize → Theme Settings → Custom CSS):

/* Make size chart table responsive */
.size-chart table {
  width: 100% !important;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

/* Optional: tidy up table borders */
.size-chart table td,
.size-chart table th {
  word-break: keep-all;
  text-align: center;
}

What this does:

  • Forces the table to fit within the popup width on mobile.

  • Adds horizontal scroll if the table is still too wide, so users can see the full chart instead of it being cut off.

  • Keeps desktop display intact.

If your popup wrapper uses a different class than .size-chart, inspect the element in your browser and replace the selector accordingly.

This should fix the issue of the size chart getting clipped on mobile while keeping it clean on desktop.

5

Good day @StudioMS , to fix the size chart table for mobile , please follow these steps:

  1. Go to Online Store in your Shopify admin.
  2. Click Edit Code, then open base.css (or your custom CSS file).
  3. Paste the CSS code provided below into the file.
@media screen and (max-width: 749px) {
body .product-popup-modal__content-info {
    padding-right: 0;
}
body .product-popup-modal__content table {
    display: block;
    max-width: fit-content;
    overflow-x: auto;
    white-space: nowrap;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto;
    margin-bottom: 30px; /* Adjust as per your requirement */
}
}

I’ve also attached screenshots for your reference, so you can easily follow along.

size-chart-table-mobile
size-chart-table-mobile422×756 26.9 KB

If you have any questions or need further assistance, please don’t hesitate to ask.

If this solution helps you, please don’t forget to like and accept it.

Best Regards,

(S.P)