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.
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.
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?
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:
<div class="fslider" data-arrows="false" data-speed="400" data-pause="4000">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide"><a href="portfolio-single-gallery.html"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" width="400" height="300" class="lazy" data-src="images/portfolio/4/4.jpg" alt="Morning Dew"></a></div>
<div class="slide"><a href="portfolio-single-gallery.html"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" width="400" height="300" class="lazy" data-src="images/portfolio/4/4-1.jpg" alt="Morning Dew"></a></div>
</div>
</div>
</div>and then find the following CSS Code in the style.css File:
.flexslider .slider-wrap > .slide {
display: none;
-webkit-backface-visibility: hidden;
}and replace it with:
.flexslider .slider-wrap > .slide:not(:first-child) {
display: none;
-webkit-backface-visibility: hidden;
}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