Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
    Posts
  • November 30, 2019 at 2:12 am #1161423
    Sandy

    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 #1161737
    Rikard

    Hey m,

    Thanks for the login details, they are not working though. Please check and verify.

    Best regards,
    Rikard

    December 2, 2019 at 10:01 pm #1162013
    Sandy

    Sorry, here is the correction.

    December 6, 2019 at 8:52 pm #1163455
    Basilis

    Hi,

    Can you please cache of WPEngine and test this after?

    Best regards,
    Basilis

    December 19, 2019 at 9:50 pm #1167956
    Sandy

    The cache of WPEngine has been cleared. The issue is still there.

    December 24, 2019 at 6:58 pm #1168959
    Victoria

    Hi m s,

    Credentials did not work for me. Could you please update the credentials?

    Best regards,
    Victoria

    January 3, 2020 at 10:23 pm #1170127
    Sandy

    Please try the log in again. I hope the have this resolved soon. Thank you.

    January 4, 2020 at 7:11 pm #1170317
    Victoria

    Hi 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, 11 months ago by Victoria.
    January 4, 2020 at 8:34 pm #1170349
    Sandy

    Thank you

    January 4, 2020 at 8:44 pm #1170358
    Victoria

    Hi m s,

    Sure.

    Did you get it working now or do you need more help?

    Best regards,
    Victoria

    January 4, 2020 at 8:45 pm #1170359
    Sandy

    Thank you, I will check it out and reply with the results.

    January 5, 2020 at 4:23 am #1170410
    Rikard

    Hi,

    Thanks for the update. Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

    January 8, 2020 at 4:03 pm #1171493
    Sandy

    Thanks, 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 #1171581
    Victoria

    Hi m s,

    Best regards,
    Victoria

    January 8, 2020 at 11:12 pm #1171645
    Sandy

    Thank you. Please go ahead and login to investigate. I look forward to receiving the solution.

    January 9, 2020 at 8:47 pm #1171947
    Victoria

    Hi 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,
    Victoria

    January 23, 2020 at 10:13 pm #1177914
    Sandy

    Thank 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 #1177980
    Sandy

    Actually, 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 #1179777
    Ismael

    Hi,

    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,
    Ismael

    January 30, 2020 at 3:23 pm #1179920
    Sandy

    Here are the urls that are impacted. The top banner area is the section in all cases.

    January 31, 2020 at 10:14 am #1180200
    Ismael

    Hi,

    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,
    Ismael

    January 31, 2020 at 3:47 pm #1180283
    Sandy

    Yes, you have to be logged in. The log in info is above.

    February 3, 2020 at 11:51 am #1180847
    Ismael

    Hi,

    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,
    Ismael

    February 6, 2020 at 8:47 pm #1182151
    Sandy

    Thank 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 #1182156
    Sandy

    I’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 #1182157
    Sandy

    Correction, the Support page not the Contact pages. Urls below.

    February 9, 2020 at 6:29 pm #1182800
    Victoria

    Hi 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,
    Victoria

    February 9, 2020 at 10:25 pm #1182862
    Sandy

    Thank 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 #1183304
    Sandy

    Looking forward to your help, thank you!

    February 11, 2020 at 2:06 pm #1183476
    Victoria

    Hi 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

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 30 total)
  • You must be logged in to reply to this topic.