Flexslider as First item in Portfolio (<576px)

3 replies · opened May 28, 2022

PpardthemonsterMay 28, 2022

When using Flexslider as First item in Portfolio, the website loading on devices <576px pauses with half an image (see attachments).

This same behavior has been duplicated in my local/latest portfolio.html file by removing the first 3 article items and starting with "Morning Dew" which uses Flexslider.

SSemicolon WebSTAFFMay 29, 2022

Hello,

Thanks for reporting this.

We have tried checking this out and while the Slider does not adapt to its proper height on load, it eventually corrects the size by itself within a second. Even on an actual iPhone (13 Pro) it appears to be working perfectly fine for us. Can you please let us know which Browser you are getting this error on so that we can check this further? Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

PpardthemonsterMay 29, 2022

That was the question on UI issue as it does not adapt to its proper height on load. Any way this be declared so it loads without that behavior as your video shows?

SSemicolon WebSTAFFMay 29, 2022

Hello,

This is the Default Behavior of Flex Slider Plugin. We will try making this more seamless in the future updates of Canvas. Meanwhile, you can consider using the following HTML Code:
[ch_pre]



attachment


attachment



[/ch_pre]

and then find the following CSS Code in the style.css File:
[ch_pre type="css"].flexslider .slider-wrap > .slide {
display: none;
-webkit-backface-visibility: hidden;
}[/ch_pre]

and replace it with:
[ch_pre type="css"].flexslider .slider-wrap > .slide:not(:first-child) {
display: none;
-webkit-backface-visibility: hidden;
}[/ch_pre]

This should work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard