HARMONISER DES TAILLES D'IMAGES

WordPress :6.4
Statut : résolu

Ce sujet contient 4 réponses, 3 participants et a été mis à jour pour la dernière fois par Cirkl Services, le il y a 12 mois.

5 sujets de 1 à 5 (sur un total de 5)

Auteur

Messages
17 avril 2024 à 20 h 42 min #2471367
Cirkl Services
Participant

Padawan WordPress
57 contributions
Bonjour,

Ma configuration WP actuelle :
- Thème utilisé : Astra
- Template : Vlogger
- Nom de l’hébergeur : o2Switch
- Adresse du site : https://cirklservices.fr
Problème rencontré : impossible d’harmoniser la taille des logos de réseaux sociaux

Si vous allez sur mon site, vous constaterez que tous les logos de RS en fin de page ne font pas la même taille, en particulier le Linktree en bout de ligne. Et c’est encore plus flagrant sur mobile.

Est-ce que quelqu’un aurait une solution pour harmoniser la taille de tous ces logos ? J’ai beau changer leurs tailles quand je modifie la page, les changements qui en découlent sur le site lui-même sont… aléatoires disons.

Merci d’avance !
20 avril 2024 à 21 h 05 min #2471499
momofr@free.fr
Modérateur

Maître WordPress
7676 contributions
Salut, il n’y a pas de solution simple :
- Soit peux harmoniser les dimensions des images une à une (avec un constructeur de page)
- Soit tu prépares tes images avec un logiciel type PhotoShop (ou Photopea en ligne) sur une base de même hauteur (la largeur suivra le ratio de l’image), attention à avoir dds marges autour des logos très proches (ou pas de marge).
21 avril 2024 à 13 h 31 min #2471512
Rock4Temps
Participant

Maître WordPress
1215 contributions
Bonjour,

Vous avez des logos de réseaux sociaux de différentes formes,circulaire,carré,rectangulaire.
Sur mobile c’est acceptable, en tout cas cela ne me choque pas!

Sur PC je vous propose ces lignes de code pour rendre le bloc icônes Sociaux
plus harmonieux:
```
/* Dimensions Icônes Réseau sociaux */
@media(min-width:768px){
	
	
    .wp-block-uagb-container.uagb-block-d2625b5c .wp-block-column:nth-child(1) .wp-block-image img{
        transform: scale(1.35);
    } 
	
	.wp-block-uagb-container.uagb-block-d2625b5c .wp-block-column:nth-child(2) .wp-block-image img{
        transform: scale(1.2);
    }
	
	.wp-block-uagb-container.uagb-block-d2625b5c .wp-block-column:nth-child(3) .wp-block-image img{
        transform: scale(1.1);
    }
	
	.wp-block-uagb-container.uagb-block-d2625b5c .wp-block-column:nth-child(6) .wp-block-image img{
        transform: scale(1.9);
    }
	
	.wp-block-uagb-container.uagb-block-d2625b5c .wp-block-column:nth-child(7) .wp-block-image img{
        transform: scaleX(1) scaleY(1.9);
		vertical-align: middle;
    }
	
	.wp-block-uagb-container.uagb-block-d2625b5c .wp-block-column:nth-child(8) .wp-block-image img{
        transform: scaleX(2.2) scaleY(1.8);
		vertical-align: middle;
    }
	
	.wp-block-uagb-container.uagb-block-d2625b5c .wp-block-column:nth-child(9) .wp-block-image img{
        transform: scaleX(1.3) scaleY(2.9);
		vertical-align: middle;
    }
	
}
```
21 avril 2024 à 13 h 35 min #2471513

Rock4Temps
Participant

Maître WordPress
1215 contributions

Ci-joint visuel du résultat

Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.

30 avril 2024 à 12 h 04 min #2472167

Cirkl Services
Participant

Padawan WordPress
57 contributions

Bonjour à tous,

Merci de votre aide, grâce au CSS, j’ai pu faire ce que je voulais.

Je mets le sujet en « résolu ».

Merci !
Auteur

Messages