Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 9, 2021 at 2:17 am #1320147
    Jasmer

    Hello,

    Two issues:

    1. Headline Rotator – Typewriter
    – On portrait orientation on mobile (see screencast below) the Typewriter animation causes the paragraph below it to jump up and down because the lines in the Typewriter animation change from one to two lines. How can I stop this?

    2. Logo – Media Element Image
    – a. On desktop, the logo at the top of the page fades when I hover. I want it to not fade. I did not select fade but it fades anyway. Why?
    – b. Also it increases size slightly, but it’s too much. I want the same slight increase effect that the logos at the bottom of the page have. Just a slight “swelling”.

    THANK YOU,

    Jas

    September 11, 2021 at 7:46 pm #1320533
    Mike

    Hey Jasmer,
    Thank you for your patience and for the screencast, for the Headline Rotator please try this css in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    @media only screen and (max-width: 767px) { 
	#top.home .av-rotator-container {
		min-height: 62px;
	}
}

    For your logo on desktop to not fade try this css:

    .avia_transform #top.home .avia-image-container.av-small-hide.av-mini-hide a:hover .image-overlay {
    opacity: 0 !important;
}

    For your logo on desktop to not grow so much try this css:

    #top.home #main .avia-image-container.av-small-hide.av-mini-hide.av-hover-grow .avia-image-overlay-wrap:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

    this transform scale is the same as the lower images but it seems like more to me, perhaps because the logo image is larger, so you can try different scales to find the one you like, such as 1.02
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    September 12, 2021 at 8:41 am #1320562
    Jasmer

    Thank you Mike! Worked perfectly :)

    Jas

    September 12, 2021 at 10:06 am #1320568
    Jasmer

    Hi Mike!

    I’d like to do this also for the page below. What is the selector for this logo in the center of the page (see below)?

    Thank you,

    Jas

    ????????????????????????? {
    opacity: 0 !important;
}
    ????????????????????????? {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}
    September 12, 2021 at 4:57 pm #1320591
    Mike

    Hi,
    Glad to hear this helped, for your /404/ page please try this css:

    #top.page-id-673 #main .avia-image-container.av-hover-grow .avia-image-overlay-wrap:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.avia_transform #top.page-id-673 .avia-image-container a:hover .image-overlay {
    opacity: 0 !important;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    September 13, 2021 at 8:04 am #1320647
    Jasmer

    Perfect! Thanks Mike!

    Jas

    September 13, 2021 at 11:31 am #1320702
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Headline Rotator – Typewriter Jumping Paragraph, Media Element Image Animation’ is closed to new replies.