Back to all Elements
In short, what I did here is used the navigator.userAgent request header to detect what OS the user is running. This method is widely supported by browsers and not to hard to implement.
Once I know which OS, I show and hide divs in the project accordingly.
Here is the code:
<script>
if ( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
$("#android").hide();
$("#web").hide();
}
else if ( /Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$("#ios").hide();
$("#web").hide();
}
else {
$("#ios").hide();
$("#android").hide();
}
</script>
Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...
A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.
.png)
Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.
.png)
Using a little bit of jQuery to adjust the success message height
.png)