Resizin table on pop up in product page

Topic summary

A user seeks help making a shoe sizing chart table more readable in a popup on mobile devices. The desktop version displays correctly, but the mobile layout is poorly arranged.

Multiple solutions offered:

  • Several developers provide CSS code snippets to be added to theme.liquid or base.css files
  • Code targets responsive table styling with max-width, display properties, and text alignment adjustments
  • Solutions use media queries to specifically address mobile viewport widths (typically max-width: 767px-949px)

Iterative refinements:

  • Initial solution works but user requests EU column repositioned to the left with more spacing between columns
  • Further adjustment needed because Nike/Jordan tables have 5 columns while others have 4, causing inconsistent appearance
  • User standardizes all tables to 4 columns and requests heading/subtitle alignment match desktop version

Resolution:
Final code solution from BSSCommerce-B2B successfully addresses all requirements. User confirms the fix works perfectly for both desktop and mobile versions.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.

@radaApeta , sorry you can change the code like this


Result: