28182 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de débutants: masquage img et police caractères

Bonjour
Eh oui, je sais que c'est basique; Cela fonctionnait même avec le css

1/ masquer une image

.full-image { /*masque l'image rentré dans un champ joomla et plus utilisé */
 display:none; 
}


Je ne comprends pas pourquoi cela ne fonctionne plus, même avec !important
J'ai essayé plusieurs choses

.full-image, #ca-1529739248826 > main > div > figure, , .img-fluid { 
 display:none!important; 
}


Avec l'inspecteur, j'arrive bien à masquer cette 1ère image si j'applique la règle
L'url (merci de ne pas répondre avec http pour éviter indexation)
preprod2.altius.fr/fr/accompagner/posters-telechargeables.html

2/ changer police de caractères
Oui comme mon précédent message, cela me semble basique. j'avai trouvé et appliqué une solution.
J'ai du faire une modification qui a produit un effet de bord car cela ne fonctionne plus.

Il s'agit des boutons mauve sur la page preprod2.altius.fr/fr/ (je ne mets pas http pour éviter une éventuelle indexation)

J'ai testé ces codes css

.bouton-mauve2, .sppb-addon a, .sppb-button-wrapper a {
    font-family: "open sans"!important;
}
.bouton-mauve2, .sp-slider-btn-text , .sppb-btn {
  font-family: "open sans"; 
}


C'est cela qui est appliqué
#sppb-addon-UUwhsfW8d_XINddl-L186 #btn-UUwhsfW8d_XINddl-L186.sppb-btn-custom {
    font-family: Raleway;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0px;
}

alors que juste au dessus, j'arrive bien à appliquer la police "open sans"
<div class="sppb-button-wrapper">
<a href="https://www.pluceo.fr/demande-de-devis" target="_blank" id="btn-UUwhsfW8d_XINddl-L186" class="sppb-btn  sppb-btn-custom sppb-btn-square sppb-btn-outline">Commandez des équipements</a>
</div>

Il s'agit des boutons mauve sur la page preprod2.altius.fr/fr/ (je ne mets pas http pour éviter une éventuelle indexation)
upload/1695735614-58614-capturedancrandu2023-09-2611-.png
Modifié par HDcms (26 Sep 2023 - 17:12)
Modérateur
Salut,

Tes deux codes fonctionnent très bien en dessous de 844px de width. Coucou la mediaqueries Smiley lol
Bonjour
Ah ok mais du coup je ne comprends pas, car je n'ai pas programmé une taille d'écran pour ceci !?
Ok j'ai compris une parenthèse de trop Smiley eek

mais j'ai un problème similaire pour mettre des tailles de H1 à H4
Je n'ai pas mis des valeurs très grandes pour les titres
H1 1,3 em
H2 1,2 em
H3 1,1 em
H4 1,05 em

Cela passe bien sur un ordi mais pas vraiment sur smartphone où c'est encore trop gros, il faut passer par les mediaqueries
Modifié par HDcms (26 Sep 2023 - 17:22)
Modérateur
HDcms a écrit :
Ok j'ai compris une parenthèse de trop Smiley eek

mais j'ai un problème similaire pour mettre des tailles de H1 à H4
Je n'ai pas mis des valeurs très grandes pour les titres
H1 1,3 em
H2 1,2 em
H3 1,1 em
H4 1,05 em

Cela passe bien sur un ordi mais pas vraiment sur smartphone où c'est encore trop gros, il faut passer par les mediaqueries


bonjour,
tu as aussi des balises <style> dans ton code source, et ligne 24, dans cette balises aux styles minifiés, on trouve par exemple pour les titres :
@media (max-width:767.98px) {
  #sppb-addon-1535519654088 .sppb-addon-title {
    font-size:28px;
    line-height:30px;
  }
}

C'est cette partie à modifié ou à écraser après ,(selon ce que tu peut faire), avec par exemple
@media (max-width:767.98px) {
#sppb-addon-1535519654088 .sppb-addon-title {
    font-size:initial;
    line-height:1.3;/* valeur que tu souhaite , exprimé par défaut en em */
  }
h1, #sppb-addon-1535519654088 h1.sppb-addon-title {
font-size:1,3em
}
h2, #sppb-addon-1535519654088 h5.sppb-addon-title {
font-size:1,2em
}

h3, #sppb-addon-1535519654088 h3.sppb-addon-title {
font-size:1,1em
}

h4, #sppb-addon-1535519654088 h1.sppb-addon-title {
font-size:1,05em
}
}

A vérifier les class à réecrire au fil des autres mediasqueries et que ce sont celles dont tu as besoin Smiley cligne
Cdt
Modifié par gcyrillus (26 Sep 2023 - 18:07)
Bonjour
gcyrillus a écrit :


bonjour,
tu as aussi des balises &lt;style&gt; dans ton code source, et ligne 24, dans cette balises aux styles minifiés, on trouve par exemple pour les titres :
@media (max-width:767.98px) {
  #sppb-addon-1535519654088 .sppb-addon-title {
    font-size:28px;
    line-height:30px;
  }
}

C'est cette partie à modifié ou à écraser après ,(selon ce que tu peut faire), avec par exemple
@media (max-width:767.98px) {
#sppb-addon-1535519654088 .sppb-addon-title {
    font-size:initial;
    line-height:1.3;/* valeur que tu souhaite , exprimé par défaut en em */
  }
h1, #sppb-addon-1535519654088 h1.sppb-addon-title {
font-size:1,3em
}
h2, #sppb-addon-1535519654088 h5.sppb-addon-title {
font-size:1,2em
}

h3, #sppb-addon-1535519654088 h3.sppb-addon-title {
font-size:1,1em
}

h4, #sppb-addon-1535519654088 h1.sppb-addon-title {
font-size:1,05em
}
}



Tu as bien trouvé des éléments, mais en fait, ce n'est pas ce que je cible. Le code mentionné est quelque chose que j'essaie aussi d'ajuster pour smartphone, mais qui provient du code généré par un page builder.

Je cherche à ajuster les codes HTML H1 à H4
Les valeurs que j'ai mis fonctionnent pour le grand écran (de 1,3em à 1,05em).
Du coup je cherchais confirmation de la valeur qui détecte la taille de l'écran du smartphone ?
ET les valeurs et unité (px, em? ...) que vous utiliseriez pour un smartphone ?
Modérateur
Re Smiley smile ,

Dans ton code, tu as apparemment deux points de ruptures utilisés : l'un a 575.98px et l'autre a 767.98px . qui correspondrait aux smartphone et tablette.

Dans l'inspecteur, si l'on regarde le CSS appliqué à l'un des titres en redimensionnant l'espace d'affichage, on s'aperçoit que ces deux points utilisent les même valeurs : 28px pour ces deux points.

Tout tes titres avec la class sppb-addon-title ont donc en taille:
en dessous de 575.98px = 28px
en dessous de 767.98px 28px
et au dela 34px

Si tu peut modifier ces styles appliqués aux points de ruptures depuis ton "page-builder" , c'est évidement mieux.
Pour le choix PX/EM ou REM , c'est à toi de voir , l'idéal reste d'utiliser la même unité de mesure pour tout les textes, de façon à pouvoir ajuster tes réglages plus facilement et de façon cohérente.
Le PX reflète une taille fixe qu'il faudra reprendre une à une si tu veut la modifier.(pt,cm, etc ... idem)
Le EM va s'accorder en fonction du font-size du parent (peut avoir des résultats non voulu avec des structure complexes et au imbrication nombreuse)
Le REM, va s'accorder sur la valeur de font-size appliquer à HTML. (probablement le plus facile à gérer)

Enfin, il reste aussi clamp() , permettant de fixer une valeur flottante entre une valeur minimale et maximale , il y a un exemple sur https://developer.mozilla.org/fr/docs/Web/CSS/clamp dont tu peut aussi t'inspirer permettant de s'affranchir de mediaquerie par exemple.

Cdt


edit , si utiliser clamp() et aussi calc() t’intéresse , voici un exemple pour le font-size, et inclut un autre pour limiter la largeur d'un conteneur principale et sans médiaqueries https://codepen.io/gc-nomade/pen/BavxKVJ

Du coup, on est totalement sorti de ta question initiale, tu peut éventuellement ouvrir un autre sujet Smiley smile
Modifié par gcyrillus (26 Sep 2023 - 19:42)
Prévenir un modérateur
Répondre au sujet
Aller à