Tagged: ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • March 2, 2024 at 5:24 pm #1436050
    Munford

    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.
    March 2, 2024 at 8:30 pm #1436069
    Mike

    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

    March 2, 2024 at 10:45 pm #1436086
    Munford

    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

    March 2, 2024 at 10:54 pm #1436089
    Mike

    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

    March 2, 2024 at 11:06 pm #1436091
    Munford

    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.)

    March 2, 2024 at 11:16 pm #1436094
    Mike

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

    Best regards,
    Mike

    March 2, 2024 at 11:27 pm #1436095
    Munford

    thanks

    March 3, 2024 at 4:02 pm #1436133
    Mike

    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

    March 3, 2024 at 4:15 pm #1436134
    Mike

    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

    March 3, 2024 at 4:21 pm #1436136
    Munford

    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.

    March 3, 2024 at 4:29 pm #1436140
    Mike

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

    Best regards,
    Mike

    March 3, 2024 at 11:33 pm #1436187
    Munford

    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.
    March 5, 2024 at 8:54 am #1436336
    Ismael

    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

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