Discussion :

[herveD]

Bonjour
J'ai modifié un code existant en remplaçant une image par une icone.
Le code CSS est moderne et un peu complexe pour moi.

Comment diminuer l'espace entre les 2 colonnes ?
Je dois prendre en compte que l'icone ou le texte peut varier quel que soit l’écran bien sûr (et si possible sans javascript)

https://jtest-ext.88h.ovh/index.php?...d=9&Itemid=101

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
div #icone {
  font-size: 10rem;
  margin-left: 60px;
  margin-top: 80px /* parfois nécessaire selon icone */
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="eb-columns-container columns-2">
<div id="icone" class="eb-column">????</div> /* MODIF colonne*/
<div class="eb-column">
<p><span class="fw-bold">Et si vous nous aidiez à grandir ?</span></p>
Et rendre plus visible<br>les ressources documentaires 
<p><span class="fw-bold">à partir de ce site<br><strong>Gros projet d'insérer plusieurs milliers de livres</strong> d'ici l'été. <br>Besoin d'au moins 2 000€ !<br></span></p>
<span class="fw-bold"><a href="pourquoi-faire-un-don">Faites un don dès maintenant</a></span></div>
</div>

[herveD]

Bonjour
Pour informations ce code étant inséré dans une extension, il est difficile de reproduire cela en dehors car il posséde déjà du code HTML et CSS
Je pense avoir résolut mon problème avec le code suivant sauf remarques pour améliorer et passer partout

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="eb-columns-container columns-2">
<div id="icone" class="eb-column">💪</div>
<div class="eb-column">
<div class="eb-mast-head">DES MAINTENANT</div>
<h1 class="eb-title">Aidez-nous</h1>
<div class="eb-description">à rendre plus visible les ressources<br>documentaires à partir de ce site<br><strong>Gros projet d'insérer plusieurs milliers de livres</strong><br>Besoin d'au moins*2 000€ !</div>
<a class="eb-btn" href="#">Faites un don dès maintenant</a></div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
div#icone {
 font-size: 12rem;
 margin-top: 100px;
 margin-left: 80px;
}
 
.eb-{eb.id} {
	font-size: 16px;
}
 
.eb-{eb.id} .eb-dialog {
    background-image: url(https://templates.tassos.gr/images/engagebox/templates-assets/Sales/abstract-shape-bg.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
 
.eb-{eb.id} .eb-container {
	width: 100%;
}
 
.eb-{eb.id} .eb-container img {
	margin: 0 auto;
    display: block;
    max-height: 270px;
}
 
.eb-{eb.id} .eb-columns-container .eb-column:nth-of-type(1) {
	flex-basis: 40%;
}
 
.eb-{eb.id} .eb-columns-container .eb-column:nth-of-type(2) {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
 
.eb-{eb.id} .eb-mast-head {
	font-weight: 700;
	font-size: 10px;
	line-height: 12px;
}
 
.eb-{eb.id} .eb-title {
	margin-top: 0;
	font-weight: 700;
	font-size: 40px;
	line-height: 47px;
	color: #FE512B;
	margin-bottom: 16px;
}
 
.eb-{eb.id} .eb-description {
	color: #212121;
	margin-bottom: 22px;
}
 
.eb-{eb.id} .eb-btn {
	display: inline-block;
	padding: 16.5px 50px;
	color: #fff;
	background: #FE512B;
	border-radius: 39px;
        text-decoration: none;
}
 
.eb-{eb.id} .eb-close {
	width: 35px;
	height: 35px;
	background: #FE512B;
	border-radius: 50%;
}
 
@media only screen and (max-width: 991px) {
	.eb-{eb.id} .eb-dialog,
	.eb-{eb.id} .eb-content {
		overflow: initial;
	}
 
	.eb-{eb.id} .eb-close {
		top: -45px;
	}
 
	.eb-{eb.id} .eb-dialog {
		background: #fff;
		box-shadow: 0px 11px 15px -7px rgba(0,0,0,.2), 0px 24px 38px 3px rgba(0,0,0,.1), 0px 9px 46px 8px rgba(0,0,0,.1);
		height: auto !important;
		padding: 24px !important;
	}
 
	.eb-{eb.id} .eb-columns-container {
		gap: 8px;
	}
}
 
@media only screen and (max-width: 576px) {
	.eb-{eb.id} img {
		display: none;
	}
 
	.eb-{eb.id} .eb-title {
		font-size: 30px;
	}
 
	.eb-{eb.id} .eb-columns-container .eb-column:nth-of-type(2) {
		align-items: center;
	}
}

[herveD]

Je pense que cela est résolu avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
/*div#icone { /* avant*/
 font-size: 12rem;
 margin-top: 100px;
 margin-left: 80px;
}*/
div#icone {
     font-size: 10rem;
     line-height: 2;
     text-align: center;
}