Largeur de colonne et de contenu

Bonjour à tous,

à chaque nouvelle journée son lot de nouveau problème... J'ai grâce à ce forum et à l'aide précieuse d'un participant réussi à modifier la largeur des articles et de la colonne de droite de lauretteflechette.com. Néanmoins voici un nouveau problème qui se présente à moi. Le fait d'avoir élargi l'espace entraîne une largeur de colonne de droite trop importante par rapport au contenu. J'ai réussi à identifier dans le code CSS l'endroit ou je pouvais régler les pourcentages de largeur des 2 éléments. Hélas dés que je touche à l'un ou à l'autre cela semble court-circuiter le responsive du thème et on se retrouve avec une toute petite colonne à droite lorsque l'on réduit l'écran au lieu de la voir passer sous les articles.
Ci-dessous le code que je trafiquote pour tenter de trouver vainement une solution à mon problème :

/* =Layout
----------------------------------------------- */
.inner-wrap {
	max-width: 1218px;
	margin: 0 auto;
}
#primary {
	width: 68%;
	float: left;
}
#secondary {
	width: 28%;
	float: right;
}
#content {
	padding-top: 45px;
}
#content a:hover {
	text-decoration: underline;
}

A savoir que j'ai modifié le

 .inner-wrap {
	max-width: 1218px;
	margin: 0 auto;
}

par :

.inner-wrap {
	max-width: 85%;
	margin: 0 auto;
}

Une idée sur la question ?
Merci d'avance.

Laurette
Modifié par lauretteflechette (14 Aug 2015 - 12:25)

Salut Laurette,

Que veux-tu faire en fait : réduire la colonne de droite ?
Le fait de modifier le max-width de .inner-wrap ne va faire que réduire la largeur du conteneur des 2 colonnes (primary et secondary).
De plus modifier ce max-width par un % n'a pas vraiment de sens, puisque ça ne limitera pas en réalité la largeur réelle (sur un écran de 3000px de large, ton wrapper fera 2550px, pas dans l'esprit de la limite précédente en px).

Concernant l'aspect responsive, il faudrait coordonner tes modification avec les media queries du css (tu as un breakpoint à 768px) il faut donc modifier aussi le CSS inclus dans cette condition : @media screen and (max-width: 768px).

Si tu veux modifier les rapports des colonnes, il faut que tu joues sur les % des width de #primary et #secondary.

Ton thème utilise-t-il un système de "custom" CSS qui surcharge le fichier CSS de base du thème ? Dans ce cas tu peux déclarer des média queries au sein de ce "custom" également.
Modifié par MatthieuR (14 Aug 2015 - 22:30)

Bonjour,
Juste au passage, que tes pages sont agréables tes textes super sympa
Bon nous sommes sur du Wordpress, et en tout cas ton code est une vrais
usine à gaz, ce n'est pas un reproche puisqu'il marche très bien même sur mon smartphone !

Ton code CSS vient de quel fichier je crois de style.css
fait attention tu mélanges deux choses

.inner-wrap {
	max-width: 1218px;
	margin: 0 auto;
}

car ici, dans la partie principale tu ne lui donnes aucune taille, juste un maximum à respecter
alors que pour les smartphone tu mets

.inner-wrap {
		width: 96%;
	}

alors sur l principal j'aurait mis aussi 90% et laissé lemax-width

Bonsoir à vous 2,

pour commencer merci de vos retours et encouragements... En effet, je suppose que le code est particulièrement bricolé... Je débute en CSS et du coup je fais de mon mieux mais cela n'est pas suffisant... Toutefois il passe pas trop mal sur tablettes et smartphones dans l'ensemble... Donc ça fonctionne même si c'est laborieux, "la fin justifie les moyens"

J'en apprends un peu plus chaque jour...
Mathieu R, ce soir en fouillant dans mon CSS j'ai voulu tenter de modifier ce fameux breakpoint de 768px car je me suis aperçue que mon menu passe sur 2 lignes sur des écrans plus petits (tel que mon pc portable à 1212px... Mais sans succès mais bref cela est un autre problème et j'ouvrirai donc un autre sujet...
Pour ce qui est #primary et #secondary j'ai bel est bien tenté de jouer la dessus mais effectivement lorsque je réduis l'écran la colonne de droite se rétrécie inexorablement et n'est plus lisible... Sachant que le fait d'avoir élargie le container a eu pour effet d'élargir la colonne de droite sur des écrans de plus de 700 px et je trouve pas ça hyper esthétique... J'aurais préférer privilégier le contenu plutôt que la colonne de droite...

Christele mon code CSS provient en effet de la feuille style.css. Merci pour la nuance du width et du max-width car je ne l'avais pas saisi et je viens de faire la modif.

Merci de vos conseils, je vais continuer à bidouiller
Bonnne soirée.