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

    hi
    two questions:
    1 / I am using this css to change the font for my image captions, but it’s not working on mobile.

    .av-image-caption-overlay-center {
    font-family: 'Arial Black'!important;
    font-size: 2em;
    line-height: 1.3;
    }

    I have checked everything and can’t find the issue. I wanted to use my imported font ‘Archivo Black’ but that didn’t work at all.
    Can you see what the problem is?

    2 / I am using image hotspots on a few pages – is there a way to disable the bottom to top animation of the hotspots and text and just have them fade in?

    thanks
    Nancy

    • This topic was modified 8 months, 2 weeks ago by Munford.
    #1436069

    Hey Munford,
    Your css for 2em on mobile is working when I check, except for the first one that has it’s own css:

    #top .heliko .av-image-caption-overlay-center {
        font-size: 4em !important;
    }

    Try changing the hotspot animation in the element settings:
    Enfold_Support_4879.jpeg

    Best regards,
    Mike

    #1436086

    HI MIke

    thanks for your reply.
    I am still seeing the wrong font on the image captions mobile – see here: https://imgur.com/a/t94qlbE.
    All my image hotspot elements are set to ‘simple fade in’ already, but that’s not the behavior I am seeing.

    not sure what is wrong there.
    Any ideas?
    Nancy

    #1436089

    Hi,
    This is not the font that I’m seeing, it looks like your screenshot is of an iPhone, please note that iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

    Best regards,
    Mike

    #1436091

    I have tried clearing the cache/data history in firefox, chrome and safari but still seeing it wrong.
    I will try again / wait.,.

    The animation is wrong on PC, and the inspector is not finding a fade but an ‘avia_hotspot_appear’ (I don’t understand animation code that well but that looks wrong to me.)

    #1436094

    Hi,
    Please include an admin login in the Private Content area so we can examine.

    Best regards,
    Mike

    #1436095

    thanks

    #1436133

    Hi,
    Thanks for the login, for me the font looks correct:
    Enfold_Support_4891.jpeg
    but I found in your css you captalized the font name so perhaps is is an issue for iPhone, so I changed this in your css, perhaps it will help.
    As for your hotspots, I set the animation to none for now, and I will ask the Dev Team to review this issue.

    Best regards,
    Mike

    #1436134

    Hi,
    ** Correction the hotspot animation settings are for the whole element not for the hotspot circles themselves.
    So I added this css for you:

    .avia_transform.js_active #top .avia_animated_image .av-display-hotspot {
    	animation: avia-fadein 1.5s 1 ease-out;
        opacity: 1;
    }
    .avia_transform.js_active #top .avia_animated_image .av-image-hotspot .av-permanent-tooltip-single {
    	animation: avia-fadein 1.5s 1 ease-out;
        opacity: 1;
        transition: none;
    }

    clear your browser cache and check.

    Best regards,
    Mike

    #1436136

    thanks so much that worked with the animation –
    I will check the fonts again.
    Is there an issue using my uploaded google font Archivo Black?
    It didn’t work when I tried it before.

    #1436140

    Hi,
    It looks like the h2 text above the images is using Archivo Black.

    Best regards,
    Mike

    #1436187

    I fixed it by using ‘archivo-black’ in the code

    yes, the heading use archivo black, but when I used it in the css for the image captions, it didn’t work so I changed it to Arial Black.
    I still see the wrong fonts on mobile on the landing page. Also on another iphone that just loaded the page for the first time.
    Is there anything else I can do to force that font?
    thanks for taking a look
    Nancy

    • This reply was modified 8 months, 2 weeks ago by Munford.
    • This reply was modified 8 months, 2 weeks ago by Munford.
    #1436336

    Hi,

    Great! Glad to know that this has been fixed. Please don’t hesitate to open another thread if you have more questions.

    Have a nice day.

    Best regards,
    Ismael

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘image caption font on mobile’ is closed to new replies.