[AwesomeBB] Page Evénement : modifer la taille d'un bloc

[Invité]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://gemurama.com/

Description du problème

Bonjour,

En affichage PC, je voudrais modifier la taille du bloc ou se trouve l'image tout pixelisée et les blocs des détails de l'événement en bas de l'image. Exemple : https://www.gemurama.com/e10019146-the-game-awards-2022

Je n'arrive pas à trouver le code CSS....

Merci d'avance pour votre aide

[Self]

Bonsoir.

La classe pour les blocs est la suivante :

Code:

.event-inner .block-content

Et la classe pour l'image elle même est :

Code:

.event-inner .block-content img

Bonne soirée .

[Invité]

Bonsoir.

La classe pour les blocs est la suivante :

Code:

.event-inner .block-content

Et la classe pour l'image elle même est :

Code:

.event-inner .block-content img

Bonne soirée .

Bonjour,

C'est bien le code mais je n'arrive pas à régler la hauteur et la largeur indépendamment

Code:

.event-inner .block-content {
  max-width: 60% ;
  max-height: 30% ;
}

Mais la forme reste carré....

[Self]

Bonjour.
Je suis sur mobile mais je pense que le mieux est d'agir sur l'image et en pixel pour la hauteur. Il s'agirait donc plus de faire comme ceci :

Code:

.event-inner .block-content img{ max-height: 350px !important; }

Ici le max-width n'est pas de mise, le mettre à 60% ferait en sorte que l'image soit à 60% de la taille du container. Mais mettre une hauteur en pixel permet de vraiment limiter la hauteur maximale de l'image.

On pourrait aussi faire en sorte que les images s'affichent toujours sur un affichage de type 16:9 mais le mieux reste de redimensionner l'image avant l'upload de toute façon.

[Invité]

Cela fonctionne.

Par contre, j'ai un problème avec l'image. Je ne sais pas si ça vient du forum mais j'ai beau redimensionné, rien y fait....

Mais il y a toujours un fond tout flou qui apparait et l'image est centré et écrasé.... J'aimerais que l'image prenne tout le bloc, sans le fond tout flou. Je ne sais pas si je me fais comprendre ?

[Self]

Si je comprends bien, vous parlez du flou de l'image.
Pour ça on pourrais faire avec ce code CSS :

Code:

.event-inner .block-content:nth-child(2) {
    overflow: hidden;
}
.block .block-content img {
    margin-top: -190px;
    margin-bottom: -185px;
}

Mais il s'agit la d'ajuster le bloc à cette image seulement, donc pas conseillé.
Bien sur si j'ai bien compris de quel flou vous parlez..

[Invité]

Si je comprends bien, vous parlez du flou de l'image.
Pour ça on pourrais faire avec ce code CSS :

Code:

.event-inner .block-content:nth-child(2) {
    overflow: hidden;
}
.block .block-content img {
    margin-top: -190px;
    margin-bottom: -185px;
}

Mais il s'agit la d'ajuster le bloc à cette image seulement, donc pas conseillé.
Bien sur si j'ai bien compris de quel flou vous parlez..

Merci, ce n'est pas génial comme résultat mais c'est mieux que rien

Avant de clôturer, puis-je avoir la classe pour le premier bloc (celui avec l'image) en entier, s'il vous plait au cas où je décide de faire quelque chose à l'avenir ?

Cette classe .event-inner .block-content:nth-child(2) touche le premier et le dernier bloc (détails de l’événement)

Merci

[Self]

Merci, ce n'est pas génial comme résultat mais c'est mieux que rien

Oui le mieux étant de rogner l'image pour ne pas avoir la partie non voulue.

Je n'étais pas descendu aussi bas , le chemin pour ne toucher que le premier semble être :

Code:

#event > div > div:nth-child(1) > div:nth-child(2)

Bonne soirée !

[Invité]

Merci, ce n'est pas génial comme résultat mais c'est mieux que rien

Oui le mieux étant de rogner l'image pour ne pas avoir la partie non voulue.

Je n'étais pas descendu aussi bas , le chemin pour ne toucher que le premier semble être :

Code:

#event > div > div:nth-child(1) > div:nth-child(2)

Bonne soirée !

Malheureusement, ça touche aussi le bloc "Détails de l'événement" qui se trouve en bas  



Bonne journée

[Self]

Malheureusement, ça touche aussi le bloc "Détails de l'événement" qui se trouve en bas  

J'ai re-testé, chez moi ça ne touche bien que le premier bloc..

[Invité]

Malheureusement, ça touche aussi le bloc "Détails de l'événement" qui se trouve en bas  

J'ai re-testé, chez moi ça ne touche bien que le premier bloc..

C'est moi qui doit mal faire parce que j'ai essayé un truc radical (pour mieux voir la différence) :

Code:

#event div:nth-child(2) {
display: none;
}

Ca efface les deux blocs....

[Milouze14]

Hello Zlork et Self ,
je viens de faire des essais et
pour l'image, ce style devrait faire l'effet escompté normalement:

Code:


.block-content  a[id="AD_LargeImg"] img
{
width:auto!important;
height:auto!important;
margin:auto!important;
}

Ce code permettra d'annuler le grossivement de l'image et de la centrer au cas ou elle serait de petite taille .


a++

[Invité]

Hello Zlork et Self  ,
je viens de faire des essais et
pour l'image, ce style devrait faire l'effet escompté normalement:

Code:


.block-content  a[id="AD_LargeImg"] img
{
width:auto!important;
height:auto!important;
margin:auto!important;
}

Ce code permettra d'annuler le grossivement de l'image et de la centrer au cas ou elle serait de petite taille .


a++

D'abord, merci

Juste avec ce style, ça me donne ce résultat là

[Milouze14]

Hello Zlork,
oui on touche juste l'image car pour le bloc il vaut mieux de pas y toucher car suivant la dimension des images,
ce sera disgracieux cher ami(e) .


a++

[Invité]

Merci beaucoup, je vais clôturer