Uuwe64Dec 3, 2020
Hi
I used the CANVAS Template for my new website. Now I realized that the Slider doesn't work correct on iPads. The slider pic is zoomed up.
www.uwereber.com
Any ideas what's wrong?
Thank you.
Regards from Germany
Uwe
Slider on iPad
9 replies · opened Dec 3, 2020
SSemicolon WebSTAFFDec 3, 2020
Hello,
You can change the background-size: cover; for the Image inside the Slider to different Values according to the Device Size. Example:
[ch_pre].device-md .custom-hero-bg {
background-size: cover;
}[/ch_pre]
Make sure that you add the .custom-hero-bg Class to the Hero Section. The Responsive Classes are as follows:
.device-xl – Class for Large Devices >=1200px
.device-lg – Class for Medium Devices >=992px to 1199px
.device-md – Class for Tablets
.device-sm – Class for Landscape Mobiles or Phablets.
.device-xs – Class for Portrait Mobiles
You can add these Custom CSS codes in the css/custom.css File.
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Uuwe64Dec 3, 2020
Hi
thanks for your reply. I added the code in the css/customs-file, but that didn't help. I checked the Niche-Demo Resume- and it's the same there. The slider pic on iphone/ipad is blurred. So I guess it's a bug or a feature...
I want the slider-pic to be clear on all devices. Maybe the last two lines in the slider-code are responsible for the blurring:``
<section id="slider" class="slider-element min-vh-60 min-vh-md-100 include-header">
<div class="vh-100 vw-100 position-fixed" style="top: 0; left: 0; background: #FFF url('images/hero-image/1.jpg') no-repeat top center; background-size: cover; background-attachment: fixed;">
<div class="container">
<div class="slider-caption dark slider-caption-right">
<div>
<h2 class="font-primary ls5" data-animate="fadeIn">works of art</h2>
<p class="font-weight-light ls1 d-none d-sm-block" data-animate="fadeIn" data-delay="400">Drawings & Paintings<br>by Uwe Reber</p>
[Latest Works →](#)
</div>
</div>
</div>
</div>
<div class="vh-100 vw-100 position-fixed blurred-img" style="top: 0; left: 0; background: #FFF url('images/hero-image/1.jpg') no-repeat top center; background-size: cover; background-attachment: fixed;"></div>
</section>SSemicolon WebSTAFFDec 3, 2020
Hello,
To disable the Blurred Image on iPad/iPhone Devices, simply use the Display utility classes: https://getbootstrap.com/docs/4.5/utilities/display/ . Example:
[ch_pre][/ch_pre]
This should definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
SSemicolon WebSTAFFDec 3, 2020
Hello,
Consider using this solution:
Remove the
background-attachment: fixed;from both the Images in the Slider.Use this CSS Code:
[ch_pre]@media (max-width: 991.98px) {
.blurred-img {
-webkit-transform: scale(1) translate3d(0,0,0) !important;
-ms-transform: scale(1) translate3d(0,0,0) !important;
-o-transform: scale(1) translate3d(0,0,0) !important;
transform: scale(1) translate3d(0,0,0) !important;
-webkit-filter: blur(0px) !important;
filter: blur(0px) !important;
}
}[/ch_pre]
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Uuwe64Dec 4, 2020
Hi
thanks again!
I'm sorry to say both don't work. Still the same with a blurred img on ipad and iphone (but not on Android)
I added the CSS code, so the whole CSS code concerning blurred-img is:
.blurred-img {
-webkit-transform: scale(1.01) translate3d(0,0,0);
-ms-transform: scale(1.01) translate3d(0,0,0);
-o-transform: scale(1.01) translate3d(0,0,0);
transform: scale(1.01) translate3d(0,0,0);
-webkit-filter: blur(8px);
filter: blur(8px);
-webkit-backface-visibility: hidden;
opacity: 0;
display: none;
}
.blurred-img.blurred-image-visible { display: block; }
@media (max-width: 991.98px) {
.blurred-img {
-webkit-transform: scale(1) translate3d(0,0,0) !important;
-ms-transform: scale(1) translate3d(0,0,0) !important;
-o-transform: scale(1) translate3d(0,0,0) !important;
transform: scale(1) translate3d(0,0,0) !important;
-webkit-filter: blur(0px) !important;
filter: blur(0px) !important;
}
}
And I added the classes in the html:
<div class="vh-100 vw-100 position-fixed blurred-img d-none d-lg-block d-md-block d-sm-block d-xs-block" style="top: 0; left: 0; background: #FFF url('images/hero-image/1.jpg') no-repeat top center; background-size: cover; background-attachment: fixed;"></div>
SSemicolon WebSTAFFDec 4, 2020
Hello,
Please consider using only this Solution: http://support.semicolonweb.com/forums/topic/slider-on-ipad/#post-23235 . We have tested this thoroughly before providing this to you and it works perfectly fine for us. We are attaching an Example File.
Don't use the previous solutions. 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.
Uuwe64Dec 4, 2020
Hi
okay thanks very much, now it works!
BUT:
When scrolling down the parallax overlay text before was shown on the blurred image, so you could read it better. Now the blurring effect doesn't show any more as background behind the Quotes-text:
I don't need the background pic to be blurred. An added dark transparent layer would do it too.
Can you provide a solution for this?
Uwe
Uuwe64Dec 4, 2020
I got it! It works!
I put the "background-attachment: fixed;" in the second image again and now the blurring effect is visible both on desktop screens, and on ipads/iphones.
Thanks again for your help!!!
SSemicolon WebSTAFFDec 5, 2020
Hello,
Glad the issues were resolved!
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
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