Bonjour, ça commence a faire pas mal de temps que je suis fasse a un problème que je n'arrive pas à résoudre, je m'explique j'ai une sidenav materialize sur mon site web, l'affichage ce fait très bien en mode desktop mais en mobile non, l'affichage est très petit, j'ai testé sur iphone 6, samsung S8 et sur le simulateur mobile chrome, petit truc bizarre, sur le simulateur mobile de firefox tout va bien l'affichage est parfait ^^
Enfin voilà ma page: http://www.vdkskim.com/vdk
et voilà mon code:
le menu html:
et la page:
Si quelqu'un à une solution car la je suis vraiment perdu je ne comprend pas
Merci
Enfin voilà ma page: http://www.vdkskim.com/vdk
et voilà mon code:
le menu html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VDK</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/style2.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</head>
<!--<a href="#slide-out" data-position="right" class="sidenav-trigger show-on-large grey-text text-darken-4 tooltipped"><i class="material-icons large" style="margin-top: 9px;">chevron_right</i></a>-->
<ul id="slide-out" class="sidenav black" style="display: block; left: 0px;@media only screen and (max-width: 1000px) {width:90%;font-size:30px;}">
<div class="container" style="margin-top:30px;width:90%;">
<a href="index.php"><img class="responsive-img dude-pic" src="/gauvdk/images/cover_1.jpg"></a>
</div>
<div class="side-navbar">
<ul style="margin-top:30%;">
<li><a class="waves-effect white-text" href="news.php"><i class="material-icons white-text">new_releases</i>News</a></li>
<li><div class="divider"></div></li>
<li><a class="waves-effect white-text" href="video.php"><i class="material-icons white-text">videocam</i>Vidéos</a></li>
<li><div class="divider"></div></li>
<li><a class="waves-effect white-text" href="spot.php"><i class="material-icons white-text">place</i>Trouver un spot</a></li>
<li><div class="divider"></div></li>
<!--<li><a class="waves-effect white-text" href="photo.php"><i class="material-icons white-text">contacts</i>Contact</a></li>
<li><div class="divider"></div></li>-->
<div class="user-view">
<a href="#name"><span class="white-text name"></span></a>
</div>
<div style="text-align:center;color:white;font-weight:bold;"></div>
<div class="user-view">
<a href="#name"><span class="white-text name"></span></a>
</div>
<li><a class="waves-effect white-text" href="../index.php"><i class="material-icons white-text">mood</i>VDK Skimboard</a></li>
<li><div class="divider"></div></li>
</ul>
</div>
</ul>
<script>
$(document).ready(function() {
var toggle = -1;
$('.slider').slider({full_width: true, indicators: false, duration: 1000, interval: 2200, dragged: true});
setTimeout(function () {
var firstSliderImage = document.getElementById('slide-image-1');
firstSliderImage.src = "/media/img/main__site_1.jpg";
firstSliderImage.onload = function () {
$('.all-body-click-region.inner__wrapper').css({'display':'block'});
$('.loader').css({'display':'none'})
};
}, 100);
});
$(document).ready(function(){
var instance = M.Sidenav.getInstance(elem);
$('.sidenav').sidenav();
});
M.AutoInit();
</script>
</html>et la page:
<!DOCTYPE html>
<html>
<?php include('menu.html');?>
<body>
<div class="row">
<a href="#" data-target="slide-out" class="sidenav-trigger show-on-large white-text"><i class="material-icons large col s1" style="margin-top: 9px;">chevron_right</i></a>
</div>
<div class="background">
<div class="slider fullscreen">
<ul class="slides">
<li>
<img class="background-image responsive-img" src="images/cover_1.jpg">
<div class="caption center">
<h3>VDK Skimboard</h3>
<h5 class="light grey-text text-lighten-3">Retrouvez toute l'actualité skimboard en France</h5>
<a href="news.php" class="waves-effect transparent grey-text darken-text-2"><i class="medium material-icons">arrow_forward</i></a>
</div>
</li>
<li>
<img class="background-image responsive-img" src="images/skim1.jpg">
<div class="caption center">
<h3>Vidéos</h3>
<h5 class="light grey-text text-lighten-3">Regardez nos vidéos mais aussi celles des meilleurs skimboarder mondiaux</h5>
<a href="#" class="waves-effect transparent grey-text darken-text-2"><i class="medium material-icons">arrow_forward</i></a>
</div>
</li>
<li>
<img class="background-image responsive-img" src="images/photo2.jpg">
<div class="caption center col s6 offset-s6">
<h3>Trouver votre spot</h3>
<h5 class="light grey-text text-lighten-3">Naviguez sur notre carte de spot,</h5>
<h5 class="light grey-text text-lighten-3">testés et approuvés !</h5>
<a href="#" class="waves-effect transparent grey-text darken-text-2"><i class="medium material-icons">arrow_forward</i></a>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>Si quelqu'un à une solution car la je suis vraiment perdu je ne comprend pas
Merci