Bonjour,
Voila je rencontre un petit problème avec mon code, j'utilise le framework front-end materialize, j'ai placé mes colonnes pour qu'elle prennent 12 colonnes en mobile et 4 colonnes en medium et plus grand. Le problème est que quand j'inspecte ma page a l'aide de l'inspecteur de google chrome et que j'utilise le toggle device toolbar, les div restent par 4 colonnes alors qu'elle devraient en prendre 12 colonnes ..
Je précise que j'utilise aussi fullpage.js
Je vous transmet un bout de mon code qui est une section sur mon site.
Merci d'avance pour vos réponses :)
<div class="section bois " data-anchor="boisanchor">
<h1 class="title-bois">Arts & Bois</h1>
<div class="row boisbox">
<div class="col s12 m4 box" style="background-image: url(images/bois.jpg)">
<h5 class="tl-title">Portes et cloisons</h5>
<p>Sur-mesure ou standard, portes palières, portes de communication, de placard & façades. Fabrication
& pose de cloisons à panneaux bois ou décor. Serrurerie adaptée.</p>
</div>
<div class="col s12 m4 box" style="background-image: url(images/home.jpg)">
<h5 class="tl-title">Mobiliers</h5>
<p>Uniquement en sur-mesure, bois, verre ou ossature aluminium tubulaire, laquées ou anodisées.</p>
</div>
<div class="col s12 m4 box" style="background-image: url(images/invest.jpg)">
<h5 class="tl-title">Parquets</h5>
<p>Fournitures, Pose & traitement, Parquet neuf ou ancien.</p>
</div>
</div>
<div class="row boisbox">
<div class="col s12 m4 xob" style="background-image: url(images/invest.jpg)">
<h5 class="tl-title">Escaliers</h5>
<p>Fabrication sur mesure & pose de tous types d'escaliers : traditionnels, contemporains, design.</p>
</div>
<div class="col s12 m4 xob" style="background-image: url(images/bois.jpg)">
<h5 class="tl-title">Terrasses</h5>
<p>Quel que soit l’espace : jardin, garde-corps, piscine, nous réalisons votre terrasse sur-mesure selon vos envies.</p>
</div>
<div class="col s12 m4 xob" style="background-image: url(images/home.jpg)">
<h5 class="tl-title">Fenêtres</h5>
<p>Tout type de fenêtre, remplacement identique à l’existant (bâtiment classé).
Fabrication et pose de lambrequins, de volets bois intérieurs, extérieurs et jalousie.
Tous types de matériaux : bois, PVC, alu, mixte…</p>
</div>
</div>
</div>
Salut,
Ca sert à définir le rendu de ta page suivant les devices. Par exemple maximum-scale=1.0
signifie que la page peut être zoomée au maximum à 1.0, cad à 100%. Grosso modo ça veut dire que sur mobile tu ne pourras pas zoomer sur le contenu de la page.
Mais normalement, cette balise meta est dans le getting started de Materialize, tu l'as suivi ?
Salut,
Tu pourrais faire un codepen ou un fiddle qu'on puisse avoir un exemple live stp ?
Parce que là comme ça c'est difficile de t'aider ...
Et si tu redimensionne simplement ton navigateur ça donne quoi ?
Que fait exactement fullpage.js ? Car je ne sais pas pourquoi, mais je pense que ça doit venir de là ;)
Merci
Bonjour BetaWeb tout d'abord merci de ta réponse si rapide :)
Après 2h00 à chercher comme un dingue je viens de trouver, je devais rajouter dans mon header
<meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport">
Je ne sais pas trop à quoi sert cette ligne mais maintenant ça marche, je vais aller chercher son utilité sur le net.
Encore merci :)