Text does not scale down when viewing on phone

Home Forums Pricing Table Plugin Text does not scale down when viewing on phone

This topic contains 12 replies, has 4 voices, and was last updated by Ole_Support Ole_Support 5 months ago.

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

    bcuizon2011
    Participant

    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?

    #15338
    mila_support
    mila_support
    Keymaster

    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

    #15340

    bcuizon2011
    Participant

    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.

    #15342
    mila_support
    mila_support
    Keymaster

    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.

    #15346

    bcuizon2011
    Participant

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

    #15359
    mila_support
    mila_support
    Keymaster

    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.

    #15360

    bcuizon2011
    Participant

    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?

    #15362
    mila_support
    mila_support
    Keymaster

    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;
    }
    /*FOR OTHER TEXT*/
    .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

    #16398

    subscribe
    Participant

    Hello,

    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!

    #16410
    mila_support
    mila_support
    Keymaster

    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.

    #16571

    subscribe
    Participant

    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!

    Ted

    #16666

    subscribe
    Participant

    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.

    #17589
    Ole_Support
    Ole_Support
    Moderator

    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,
    sypsystic.com
    Ole

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

Get plugins bundle today and save over 80%