Responsive website: desktop, tablet en mobiel

Laatste update: 31/03/2021
19:28
De ervaring als: Ontwerper
Met: Een website

Leestijd: < 1 minuut

Er zijn drie variaties waarop een website ontworpen wordt. Dit alles heeft te maken met hoe groot het scherm is. Hoe kleiner het scherm, hoe belangrijker het is dat alles duidelijk en vindbaar is op de website. Ook de tablet modus is belangrijk omdat het ook vaak de horizontale weergave is wanneer iemand op zijn mobiel naar de website kijkt.

Ontdek de ervaring

				
					.woocommerce .widget_price_filter .ui-slider .ui-slider-range {

background-color: #fff;

}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {

background-color: #fff;

}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {

background-color: #000;

}

				
					<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos) {
$('#stickyheaders').addClass('headerup');
} else {
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
}); }); });

</script>
<style>
#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-110px); /*adjust this value to the height of your header*/
}
</style>

Responsive website: desktop, tablet en mobiel

Ontdek de ervaring

Long Read