Vous n'êtes pas identifié(e).
13 février 2024 Sortie de Dotclear 2.29
Bonjour,
J'ai mis en place ce site l'année dernière à partir du thème Welsh 2.0.
Comme les gens sont de plus en plus nombreux à avoir Internet dans la poche, j'aimerais bien garder la même présentation mais avec une meilleure lisibilité sur les mobiles. Concrètement, je voudrais que la colonne de gauche prenne 100% de la largeur sur les écrans de petite taille, et que la colonne de droite soit mise en bas de la page, exactement comme sous Ductile.
Du coup, je me demande ce qui est le plus simple : est-ce de partir de Ductile et de reproduire la mise en page actuelle, afin de ne pas avoir à gérer les changements de largeur de la page puisque Ductile le fait déjà, ou bien est-ce d'adapter mon thème actuel pour gérer les différentes largeurs possibles?
Grégoire
Hors ligne
Je jetterai un œil ce soir ou demain sur le thème welsh.
«Quand j'étais petit, je voulais être maître du monde. Maintenant que je suis grand, j'arrive à peine à être maître de moi-même.» Le Chat/Philippe Geluk.
Dotclear a besoin de vous
Hors ligne
Vite fait, ajoute ça à la fin de ton fichier style.css :
/*--------------------------
MOBILES
___________________________*/
@media handheld, only screen and (max-device-width:500px), only screen and (max-width:500px) {
.dc-home .post .post-content, .dc-home .post .post-info, .dc-home .post .post-tags, .dc-home .post .read-it, .dc-home .post .post-info-co, #sidebar .tags ul {
display: none;
}
#page, #content, #top, #wrapper, #main, #footer, #sidebar, #search {
width: auto;
float: none;
display: block;
}
#content, #top, #wrapper, #main, #footer, #sidebar, #search, #blognav, #blogextra {
margin: 0 0;
padding: 0 0;
}
#page {
margin: 3em 1em 1em 1em;
width: 90%;
min-width: auto;
}
#wrapper {
padding: 1em 1em;
}
#top h1 {
font-size: 3em;
margin: .3em .3em;
}
html[lang=fr] #top h1:after {
content: " (mobile)";
font-size: 30%;
}
.post-title {
font-size: 2em;
}
.dc-home .post-title {
font-size: 1.5em;
}
#prelude {
color: rgb(171, 171, 171);
left: 0;
right: 0;
margin: 0 0;
padding: 0 1em;
}
#prelude a {
color: #6b6b6b;
}
#prelude a:before {
content: "";
}
.dc-home .post-info-co {
border-top: none;
border-bottom: none;
}
.dc-home .post {
border-bottom: 1px solid ##4477CC ;
margin-bottom: 0;
}
.dc-home div.post.first {
border-top: 1px solid #4477CC ;
}
.dc-home article .post-title, .dc-home #content article.first .post-title {
margin-top: 0;
padding-top: .5em;
padding-bottom: .5em;
}
.dc-home .post-title a {
display: block;
width: 100%;
}
.dc-home .post-title:before {
content: "►";
float: right;
color: #4477CC;
}
.post object, .post video {
width: 100%;
}
#sidebar li a {
display: block;
width: 100%;
}
#sidebar li.ligal a {
display: block;
width: 80%;
float: left;
}
#sidebar > div {
float:none;
width: 100%;
display: block;
font-size: 120%;
}
#topnav li span {
display: none;
}
#comment-form fieldset p.field {
padding:0 0;
}
pre {
white-space: -moz-pre-wrap;
white-space: -hp-pre-wrap;
white-space: -o-pre-wrap;
white-space: -pre-wrap;
white-space: pre-wrap;
white-space: pre-line;
word-wrap: break-word;
}
.post img, .post object, .post iframe {
max-width: 80%;
}
.field label {
display: block;
float: none;
width: 100%;
}
.field input, .field textarea {
display: block;
width: 100%;
}
}
«Quand j'étais petit, je voulais être maître du monde. Maintenant que je suis grand, j'arrive à peine à être maître de moi-même.» Le Chat/Philippe Geluk.
Dotclear a besoin de vous
Hors ligne
Ce n'était pas nécessaire, par exemple mon iPhone 4s a une résolution de 640*960 mais virtuellement il fait du 320*480 et donc les media queries fonctionnent. ;-)
Ce bout de code css devrait fonctionner sur la plupart des thèmes basé sur le thème Blowup, faudra juste changer des petites choses comme les couleurs, etc.
«Quand j'étais petit, je voulais être maître du monde. Maintenant que je suis grand, j'arrive à peine à être maître de moi-même.» Le Chat/Philippe Geluk.
Dotclear a besoin de vous
Hors ligne
Confronté au même problème,
et sur des sites peu anciens, j'avais trouvé une solution à base Jquery, spécialement avec ce système http://responsejs.com/ .
Il nécessite une petite prise en main, mais on peut arriver très vite à de bons résulats...
Hors ligne
Vous n'êtes pas identifié(e).