-
AuthorPosts
-
November 30, 2019 at 2:12 am #1161423
In Text Block / Screen Options / Font Size settings, I have a custom font size for “Font Size for small screens (between 480px and 767px – eg: Tablet Portrait)” and”Font Size for very small screens (smaller than 479px – eg: Smartphone Portrait)”. But they don’t actually work, the font size doesn’t get smaller like it should. Please advise.
December 2, 2019 at 6:10 am #1161737Hey m,
Thanks for the login details, they are not working though. Please check and verify.
Best regards,
RikardDecember 2, 2019 at 10:01 pm #1162013Sorry, here is the correction.
December 6, 2019 at 8:52 pm #1163455December 19, 2019 at 9:50 pm #1167956The cache of WPEngine has been cleared. The issue is still there.
December 24, 2019 at 6:58 pm #1168959Hi m s,
Credentials did not work for me. Could you please update the credentials?
Best regards,
VictoriaJanuary 3, 2020 at 10:23 pm #1170127Please try the log in again. I hope the have this resolved soon. Thank you.
January 4, 2020 at 7:11 pm #1170317Hi m s ,
You can try using span elements or p elements and the font sizes for the text block should work.
Best regards,
Victoria- This reply was modified 4 years, 10 months ago by Victoria.
January 4, 2020 at 8:34 pm #1170349Thank you
January 4, 2020 at 8:44 pm #1170358Hi m s,
Sure.
Did you get it working now or do you need more help?
Best regards,
VictoriaJanuary 4, 2020 at 8:45 pm #1170359Thank you, I will check it out and reply with the results.
January 5, 2020 at 4:23 am #1170410Hi,
Thanks for the update. Please let us know if you should need any further help on the topic.
Best regards,
RikardJanuary 8, 2020 at 4:03 pm #1171493Thanks, I tried changing it from h1 to p and adding span elements to control the font size (it needs to be 54pt), but it didn’t work.
January 8, 2020 at 8:14 pm #1171581Hi m s,
Best regards,
VictoriaJanuary 8, 2020 at 11:12 pm #1171645Thank you. Please go ahead and login to investigate. I look forward to receiving the solution.
January 9, 2020 at 8:47 pm #1171947Hi m s,
I added the code for you, please check if it looks as you wanted:
@media only screen and (min-width:1024px){ #av_section_1 .avia_textblock.av-small-font-size-32 p { text-align: center; font-size: 54px; } } @media only screen and (max-width:479px){ #av_section_1 .avia_textblock.av-small-font-size-32 p { text-align: center; font-size: 22px; } } @media only screen and (min-width: 480px) and (max-width:1023px){ #av_section_1 .avia_textblock.av-small-font-size-32 p { text-align: center; font-size: 28px; } }
Best regards,
VictoriaJanuary 23, 2020 at 10:13 pm #1177914Thank you, yes it seems to work. The line spacing doesn’t auto fit though, so the vertical space between the lines of text is too big on mobile. How is that controlled?
Also, the positioning of the text over the background image is problematic on mobile – it sometimes covers an important part of the image. What is the CSS -for mobile only- to make the text change position from vertical center to bottom vertical position, with specified padding/%?
January 24, 2020 at 5:11 am #1177980Actually, no your code is not working. Using the Enfold font size options seems to be working now, except the max font size is 40pt when I need 54pt. The title text is now P instead of H1. The second line of text is now P instead of H2. But it’s not big enough. Please take a look and let me know what’s wrong.
January 30, 2020 at 11:45 am #1179777Hi,
Sorry for the delay. Did you make the text Make your space part of the image? Please provide a link to a test page showing the issue if you need more assistance.
Best regards,
IsmaelJanuary 30, 2020 at 3:23 pm #1179920Here are the urls that are impacted. The top banner area is the section in all cases.
January 31, 2020 at 10:14 am #1180200Hi,
Thank you for the info.
All those pages don’t exist. Did you move the site somewhere else? Or do we have to be logged-in in order to access those pages?
Best regards,
IsmaelJanuary 31, 2020 at 3:47 pm #1180283Yes, you have to be logged in. The log in info is above.
February 3, 2020 at 11:51 am #1180847Hi,
Sorry for the delay. We set the line height property of the text block to 1.2em.
#av_section_1 .avia_textblock.av-small-font-size-32 p { text-align: center; font-size: 54px; line-height: 1.2em; }
This is how the text looks now.
Screenshot: https://imgur.com/a/ZWpbKjq
Best regards,
IsmaelFebruary 6, 2020 at 8:47 pm #1182151Thank you! That fixed the line height. What is the CSS -for mobile only- to make the text change position from vertical center to bottom vertical position, with specified padding/%?
February 6, 2020 at 9:14 pm #1182156I’ve updated Enfold and see new options to control the font styling for various devices – which is great. But in the meantime, the text isn’t behaving consistently. On the contact page, which we fixed, the header text looks correct. But when I try to set up the same elements on the product page, the fonts are too small. I created a template from the contact page and added the template to the product page, and the fonts look too small there too – even though it’s a template of what works on the contact page. ??? Please advise.
February 6, 2020 at 9:18 pm #1182157Correction, the Support page not the Contact pages. Urls below.
February 9, 2020 at 6:29 pm #1182800Hi m s,
You can try the code like this:
@media only screen and (min-width:1024px){ #av_section_1 .avia_textblock.av-small-font-size-32 p, #av_section_1 .hr + .av_textblock_section .avia_textblock p { text-align: center; font-size: 54px; } } @media only screen and (max-width:479px){ #av_section_1 .avia_textblock.av-small-font-size-32 p, #av_section_1 .hr + .av_textblock_section .avia_textblock p { text-align: center; font-size: 22px; } } @media only screen and (min-width: 480px) and (max-width:1023px){ #av_section_1 .avia_textblock.av-small-font-size-32 p, #av_section_1 .hr + .av_textblock_section .avia_textblock p { text-align: center; font-size: 28px; } }
Best regards,
VictoriaFebruary 9, 2020 at 10:25 pm #1182862Thank you, that seems to have helped.
What is the CSS -for mobile only- to make the text change position from vertical center to bottom vertical position, with 5% padding below it?
February 11, 2020 at 12:04 am #1183304Looking forward to your help, thank you!
February 11, 2020 at 2:06 pm #1183476Hi m s,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width:767px){ #av_section_1 .flex_column > .hr { height: 190px !important; } #av_section_1 .av_textblock_section + .hr { height: 30px !important; } }
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.