Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
    Posts
  • #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.

    #1161737

    Hey m,

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

    Best regards,
    Rikard

    #1162013

    Sorry, here is the correction.

    #1163455

    Hi,

    Can you please cache of WPEngine and test this after?

    Best regards,
    Basilis

    #1167956

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

    #1168959

    Hi m s,

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

    Best regards,
    Victoria

    #1170127

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

    #1170317

    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, 10 months ago by Victoria.
    #1170349

    Thank you

    #1170358

    Hi m s,

    Sure.

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

    Best regards,
    Victoria

    #1170359

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

    #1170410

    Hi,

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

    Best regards,
    Rikard

    #1171493

    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.

    #1171581

    Hi m s,

    Best regards,
    Victoria

    #1171645

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

    #1171947

    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

    #1177914

    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/%?

    #1177980

    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.

    #1179777

    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

    #1179920

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

    #1180200

    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

    #1180283

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

    #1180847

    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

    #1182151

    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/%?

    #1182156

    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.

    #1182157

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

    #1182800

    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

    #1182862

    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?

    #1183304

    Looking forward to your help, thank you!

    #1183476

    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

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