Dotclear

Vous n'êtes pas identifié(e).

Annonce

13 février 2024 Sortie de Dotclear 2.29

#1 2012-09-11 10:10:26

geceo
Membre
Lieu : Cesson Sévigné
Inscription : 2008-05-10
Site Web

Solution la plus simple pour passer un site en «responsive design»?

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

#2 2012-09-11 18:48:33

patidou
Membre
Inscription : 2004-11-14
Site Web

Re : Solution la plus simple pour passer un site en «responsive design»?

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

#3 2012-09-12 20:34:14

patidou
Membre
Inscription : 2004-11-14
Site Web

Re : Solution la plus simple pour passer un site en «responsive design»?

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

#4 2012-09-13 14:45:55

geceo
Membre
Lieu : Cesson Sévigné
Inscription : 2008-05-10
Site Web

Re : Solution la plus simple pour passer un site en «responsive design»?

Merci beaucoup Patidou, ça fonctionne (j'ai juste remplacé 500px par 600px pour tester sur mon Galaxy S).

Hors ligne

#5 2012-09-13 17:11:15

patidou
Membre
Inscription : 2004-11-14
Site Web

Re : Solution la plus simple pour passer un site en «responsive design»?

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

#6 2012-09-17 08:45:08

Synthia
Membre
Inscription : 2012-09-14

Re : Solution la plus simple pour passer un site en «responsive design»?

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).

Pied de page des forums

Sites map