- This topic has 12 replies, 4 voices, and was last updated 4 years, 10 months ago by
Ole_Support.
- AuthorPosts
- August 23, 2017 at 07:45 #15324
AnonymousInactiveHello. 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?
August 23, 2017 at 22:42 #15338
mila_supportMemberHi @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 changesAugust 24, 2017 at 07:00 #15340
AnonymousInactiveThanks 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.
August 24, 2017 at 12:03 #15342
mila_supportMemberHi @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.August 24, 2017 at 20:37 #15346
AnonymousInactiveI tried clearing the cache and even made another test site but still the same result.
August 28, 2017 at 14:46 #15359
mila_supportMemberHi @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.August 28, 2017 at 16:00 #15360
AnonymousInactiveGreat! 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?
August 29, 2017 at 20:10 #15362
mila_supportMemberHi @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 sizeAdditionally, please, don’t forget to save changes and check the standard quotes – http://prntscr.com/gdyl39
January 18, 2018 at 19:01 #16398
AnonymousInactiveHello,
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!
January 19, 2018 at 20:49 #16410
mila_supportMemberHi @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.
January 31, 2018 at 19:44 #16571
AnonymousInactiveHi 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
February 7, 2018 at 23:50 #16666
AnonymousInactiveWe 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.
May 16, 2018 at 15:19 #17589
Ole_SupportKeymasterWe 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 - AuthorPosts
- You must be logged in to reply to this topic.