Text does not scale down when viewing on phone

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #15324


    Hello. Your plugin is great. I just have an issue when viewing the table on a phone. The text would not scale down making it not fit on the table. If it is in mobile view and in portrait mode then it is fine but when rotating the screen or switching to desktop view then it messes up. Kindly check my site https://aimglobalhealthshop.com/websites/pricing/ on your mobile. Do you have a fix for this?


    Hi @bcuizon2011

    Thank you for contacting us about your question.

    In order to set needed font size for this part of the table – http://prntscr.com/gbya1c
    only for mobile devices, please follow the next instructions:
    1. Open the needed Pricing Table at your admin area
    2. Click Edit CSS
    3. Paste next code
    /*when max screen width less than 1050px*/
    @media screen and (max-width: 1050px) {
    #{{table.view_id}} .ptsEl.ptsCol .ptsColDesc .ptsEl[data-el=”table_cell_txt”] span > span > span,
    #{{table.view_id}} .ptsEl.ptsCol .ptsColDesc .ptsEl[data-el=”table_cell_txt”] p > span {
    font-size: 38px !important;
    #{{table.view_id}} .ptsEl.ptsCol .ptsColDesc .ptsEl[data-el=”table_cell_txt”] span > span,
    #{{table.view_id}} .ptsEl.ptsCol .ptsColDesc .ptsEl[data-el=”table_cell_txt”] p span > strong > span {
    font-size: 32px !important;

    /*On Hover styles*/
    #{{table.view_id}} .ptsEl.ptsCol.hover .ptsColDesc .ptsEl[data-el=”table_cell_txt”] span > span > span,
    #{{table.view_id}} .ptsEl.ptsCol.hover .ptsColDesc .ptsEl[data-el=”table_cell_txt”] p > span {
    font-size: 40px !important;
    #{{table.view_id}} .ptsEl.ptsCol.hover .ptsColDesc .ptsEl[data-el=”table_cell_txt”] span > span,
    #{{table.view_id}} .ptsEl.ptsCol.hover .ptsColDesc .ptsEl[data-el=”table_cell_txt”] p span > strong > span {
    font-size: 36px !important;
    – http://prntscr.com/gc6ug2
    Where – font-size: 38px !important; – is a size of the text – in your case its P symbol;
    font-size: 32px !important; – is a size of the numbers – in your cause 3,500;
    font-size: 40px !important; – is a size of the text on hover;
    font-size: 36px !important; – is a size of the numbers on hover;
    4. Click Ok
    5. And Save changes



    Thanks for your reply. I tried using the code but it still doesn’t show any changes on my phone. I even tried changing the font size values on the code you gave me but there was not even a small change.


    Hi @bcuizon2011

    Most likely the issue is in your cache.
    Please make sure you cleaned the cache in your cache plugin,
    cleaned cache and cookies in your browser and reloaded the page to see changes.



    I tried clearing the cache and even made another test site but still the same result.


    Hi @bcuizon2011

    Please make sure you have standard quotes in the code your inserted here – http://prntscr.com/gdyl39
    Then table will work as it should.



    Great! It worked for the prices but the titles on the top did not change like the one we just did. Would that be a separate code?


    Hi @bcuizon2011

    Sure, you can repeat the same instructions as here – https://supsystic.com/topic/text-does-not-scale-down-when-viewing-on-phone/#post-15338

    but with this code

    /*when max screen width less than 1050px*/
    @media screen and (max-width: 1050px) {
    /*FOR HEADER*/
    .ptsEl.ptsCol .ptsColHeader .ptsEl[data-el=”table_cell_txt”] p span {
    font-size: 20px !important;
    .ptsEl.ptsCol .ptsRows .ptsCell .ptsEl[data-el=”table_cell_txt”] p span {
    font-size: 16px !important;

    where font-size: 20px !important; – is the Header font size
    font-size: 16px !important; – other pricing table text font size

    Additionally, please, don’t forget to save changes and check the standard quotes – http://prntscr.com/gdyl39




    I am having a similar issue. On mobile, the font in the header extends beyond view to the right. I have tried the code provided above to resize the header font on smaller screens but it did not apply.

    One other issue is that the checkmarks are not centered vertically and we haven’t been able to correct that either.

    If you can assist with the css that will correct these two things, it would be much appreciated.

    Here is the url of the page: http://btfc.studio28.io/register/membership-levels/

    Thank you!


    Hi @subscribe

    I have followed the page link you have provided. There is a cache plugin active on it. Please make sure you have saved settings of the plugin you have changes and cleaned cache in your cache plugin. And let us know about the result.



    Hi Mila,

    Sorry for the delay. I have disabled caching on the dev site at http://btfc.studio28.io/register/membership-levels/

    The live version is cached, but for reference, it’s at: https://blacktvfilmcollective.org/register/membership-levels/

    Thanks in advance!




    We decided to just reduce the font size from 30 to 24, which took care of it on most phones.

    You can go ahead and close the ticket.



    We are glad that you figured out how to solve that issue by your own.
    Don’t hesitate to contact us if you’ll need our help again.

    Best regards,

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.
Thanks so much! Please Enter Your Info Below To Get PRO Discount and Gifts