Size Chart too big on phone

[nicolewx]

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

[GTLOfficial]

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

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

[nicolewx]

Hi! doesn't seem to work 😞

[Bundler-Manuel]

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!

[nicolewx]

Hi there! This doesn't seem to work 😞

[Dan-From-Ryviu · Accepted solution]

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;
}
}

[nicolewx]

This works! Thank you so much!

[Dan-From-Ryviu]

Very welcome and have a great day ahead! 

[DaisyVo]

Hi @nicolewx ,

Can you share which part has error?

You can share with me a screenshot of it.

Best,

Daisy

[nicolewx]

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

[websensepro]

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:

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