Size Chart too big on phone

Store Design

Topic summary

A user reported that their size chart table displays incorrectly on mobile devices, with numbers appearing stacked vertically instead of properly formatted.

Problem Details:

  • Size chart numbers are stacking on mobile view
  • Issue occurs in the product accordion table on phone screens
  • Screenshot provided showing the formatting problem

Solutions Attempted:

  • Multiple CSS code snippets were suggested by different community members
  • Initial solutions targeting font-size adjustments in base.css did not resolve the issue
  • One approach focused on adjusting table cell padding for mobile screens

Resolution:

  • Final working solution involved adding media query CSS code to theme.css/base.css
  • Code targets specific table rows within the product accordion, adjusting both font-size (12-13px) and padding (12px) for screens under 550px width
  • User confirmed this solution successfully fixed the stacking issue

Status: Resolved with custom CSS targeting mobile table formatting.

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

Hi my size chart seems to be too large on phone that the numbers are stacked!

How can i adjust font size?

Thanks!

https://fitnessflair.co/products/ascend-compression-tee

2

Hello @nicolewx
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.product-form__input--pill input[type="radio"] + label {
font-size: 1rem !important;
}

result

126.png
126.png1124Ă—528 69.2 KB

If this was helpful, hit the like button and accept the solution.
Thanks

3

Hi there Nicole @nicolewx you should try these following steps

1) Go to Online Store->Theme->Edit code.

2) Search file base.css

3) Paste the below code at bottom of the file → Save

@media (max-width: 767px){

strong[data-mce-fragment=“1”] {

font-size: 23px !important;

}}

With this, the font size of the size chart should be appropriately adjusted. Let me know if this works for you!

4

Hi! doesn’t seem to work :disappointed_face:

5

Hi there! This doesn’t seem to work :disappointed_face:

6

Hi @nicolewx

You can add this code to Custom CSS in Sale Channels > Online Store > Themes > Customize > Theme settings to solve it.

@media (max-width: 749px) {
.product__accordion  table td {
    padding: .2em;
}
}

Screenshot 2025-01-09 at 14.10.56.png
Screenshot 2025-01-09 at 14.10.56.png986Ă—998 45.2 KB

7

Hi @nicolewx ,

Can you share which part has error?

You can share with me a screenshot of it.

Best,

Daisy

8

IMG_3655.png
IMG_3655.png1290Ă—2796 161 KB

Hi!! The numbers are stacked on mobile as shown!

9

Hi @nicolewx

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:550px){
.product__accordion .accordion__content table tbody tr:nth-child(1) td {
    font-size: 12px !important;
    padding: 12px 0 !important;
}
.product__accordion .accordion__content table tbody tr:nth-child(2) td {
    padding: 12px 0 !important;
    font-size: 13px !important;
}
.product__accordion .accordion__content table tbody tr:nth-child(3) td {
    padding: 12px 0 !important;
    font-size: 12px !important;
}
.product__accordion .accordion__content table tbody tr:nth-child(4) td {
    font-size: 12px !important;
    padding: 12px 0 !important;
}
}

Result:

websensepro_0-1736409330714.png
websensepro_0-1736409330714.png241Ă—494 11 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

10

This works! Thank you so much!

1 Like
11

Very welcome and have a great day ahead!