[WordPress] Aligner texte et image horizontalement

Version imprimable

09/07/2019, 03h59
anae9

[WordPress] Aligner texte et image horizontalement

Bonjour!
Je suis ultra débutante en CSS et ça fait des semaines que je cherche à mettre mon image à gauche et mon texte à droite.
Pour info, ce que je voudrais faire avec mon site c'est mettre l'image du premier article à gauche et le texte à droite sur ma page d'accueil. Puis l'inverse pour celui du dessous et ainsi de suite.

Est-ce que quelqu'un pourrait m'aider pleaaaaase? Je désespère vraiment...

Voici le lien de mon site si besoin: https://julidayy.com

Merciii :D
09/07/2019, 09h32
Invité

Bonjour,

On ne peut pas accéder à ton site : il demande de se connecter (blog "privé").
09/07/2019, 15h14
anae9

Oups!
Normalement ça devrait être bon!: https://julidayy.com

Une solution :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@media screen and (min-width:769px) {
  body.home #primary {
    width:100%;
  }
  body.home article {
    overflow: hidden; /* à cause des float */
  }
  body.home article > div, 
  body.home article > header {
    float: left;
    width: 50%;
    padding: 0 10px;
  }
  body.home article:nth-child(2n+1) > div, 
  body.home article:nth-child(2n+1) > header {
    float: right;
  }
}

09/07/2019, 21h43
anae9

Wow merci beaucoup!!
Je peux clore le sujet :)
19/08/2019, 22h42
anae9

[WordPress] Articles en quinconces les uns en dessous des autres

Bonjour!
Je suis ultra débutante en CSS et ça fait des semaines que je cherche à mettre mon image à gauche et mon texte à droite.
Pour info, ce que je voudrais faire avec mon site c'est mettre l'image du premier article à gauche et le texte à droite sur ma page d'accueil. Puis l'inverse pour celui du dessous et ainsi de suite.

Est-ce que quelqu'un pourrait m'aider pleaaaaase? Je désespère vraiment...

Voici le lien de mon site si besoin: http://julidayy.com

Merciii

Et ça, c'est quoi ??
https://www.developpez.net/forums/d1...rizontalement/

Quand tu changes de template, DIS-LE ! (au lieu de faire un copier-coller mot pour mot ! :cfou: )

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@media screen and (min-width:769px) {
	body.home .et_pb_row_2 {
		width: 100%;
	}
	body.home article.et_pb_post:nth-child(2n+1) {
		padding-right: 20px;
	}
	body.home article.et_pb_post:nth-child(2n+1) .entry-featured-image-url {
		width: 50%;
		float: left;
		margin-right: 20px;
	}
	body.home article.et_pb_post:nth-child(2n) {
		padding-left: 20px;
	}
	body.home article.et_pb_post:nth-child(2n) .entry-featured-image-url {
		width: 50%;
		float: right;
		margin-left: 20px;
	}
	body.home article.et_pb_post a.more-link {
		display: inline-block;
	}
}