Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 12, 2020 at 9:10 pm #1237158
    cd2s

    Hello Kriesi Team

    I have an issue since the latest upgrade of Enfold today to 4.7.6.2 and WP 5.5 that the animated gif we are running as a background image in a colour section is no longer showing on ipad (all latest iOs), I tried on 2 different ipads.

    I have 2 colour sections on the top of the home page

    // desktop version — set to hide
    — Hide on small screens (between 480px and 767px – eg: Tablet Portrait)
    — Hide on very small screens (smaller than 479px – eg: Smartphone Portrait)

    // mobile version — set to hide
    — Hide on large screens (wider than 990px – eg: Desktop)
    — Hide on medium sized screens (between 768px and 989px – eg: Tablet Landscape)

    It is showing on mobile and on desktop but not on iPads.
    Also I disabled the caching plugin wp rocket, to make sure it is not that.

    Any help is appreciated.
    Thanks heaps.
    Corina

    August 14, 2020 at 5:32 am #1237661
    Rikard

    Hey Corina,

    I don’t have an Ipad to test with right now, but I’ll ask the rest of the team to have a look as well.

    Please reply to this thread so that it gets added back to our support queue.

    Best regards,
    Rikard

    August 28, 2020 at 8:38 pm #1241697
    cd2s

    Hey Rikkard
    Thanks, this is still happening on iPad. Could someone please look into it?

    Thanks heaps.
    Corina

    September 7, 2020 at 9:51 am #1243876
    cd2s

    Hello Kreisi Team

    Am so sorry, but just checking in on this as no one seems to be responding.
    Would appreciate some help as to why this is not showing on an ipad—tested on two different ones.

    Thanks so much.
    Corina

    September 11, 2020 at 1:41 pm #1245140
    Mike

    Hi,
    Sorry for the very late reply, I don’t have an iPad so I tested on the live.browserstack.com site, which claims the tests are on actual devices. I did see the error and believe that current visibility settings would not achieve your desired results, so I disabled them and added this css to your WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
	#top.home #av_section_1 {
		display: none;
	}
}
@media only screen and (min-width: 768px) { 
	#top.home #av_section_2 {
		display: none;
	}
}

    This shows the gif of the “A” up to 767px and the full word after 768px, in my test on browserstack this now works.
    Please clear your browser cache and check.

    Best regards,
    Mike

    October 10, 2020 at 5:07 pm #1251906
    cd2s

    Hi Mike

    Sorry for my late reply too and thank you so much for your help. Truly appreciate it.
    I can see it is now there on my 12″ iPad Pro but for some reason it sits nearly at the top of the screen and does look quite stretched. Any reason why that would be? It should look the same as it does on the computer screen, but resize it according to screen size?

    It is a Background Image in a colour section, set to stretch to fit the screen with focus on center/center, but it does not seem to stretch on the iPad screen? and definitely not centred? Also it keeps looping on the iPad but it shouldn’t it’s not set to loop?? Once it stops it should just display the word ‘Akkomplice’, which on the laptop/desktop it does.

    Thanks so much.
    Corina

    • This reply was modified 4 years, 2 months ago by cd2s.
    October 10, 2020 at 9:21 pm #1251948
    Mike

    Hi,
    I added this css to adjust the background image size and position for the iPad, please clear your browser cache and check.

    @media only screen and (min-width: 768px) and (min-width: 1024px) and (orientation : portrait) { 
	#top.home #av_section_1 > .avia-full-stretch {
    background-size: contain !important;
    background-color: #001636;
    background-position: 0 70% !important;
} 
}
@media only screen and (min-width: 768px) and (min-width: 1366px) and (orientation : landscape) { 
	#top.home #av_section_1 > .avia-full-stretch {
    background-size: contain !important;
    background-color: #001636;
    background-position: 0 90% !important;
} 
}

    The looping is set in the gif image, you can change the loop count with an online editor or with the tool you used to create the gif.
    The gif loops for me on desktop with a pause between loops

    Best regards,
    Mike

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