1486 sujets

Web Mobile et responsive web design

[Résolu] Media queries intégrées

Bonjour, je me demandais quelle serait la syntaxe pour intégrer du css responsive sur une partie de titre dans elementor (gratuit)/WP...?

Je fait un appel pour une police, et je voudrais avoir une taille differente sur mobile vs PC
Mon code appel placé dans le pavé de rédaction du titre : 
<link href="https://monsite.men/wp-content/mapolice.ttf" ><span style ="font-family: 'mapolice', cursive;  font-weight: normal; color : #6EC1E4; font-size: 80px; line-height: 80%; text-shadow: grey 0.01em 0.02em 0.03em">Les Programmes</span>


Possible sur le même pavé, ou faire deux blocs différents dédiés..?
Merci ^^
Modérateur
Salut !

Il n'est pas possible de mettre une media queries en inline dans le style="" d'un élément.

Tu peux par contre tenter d'ajouter une balise style dans le HTML (idéalement dans le <head> mais c'est possible dans le body juste avant ton élément). Il faudra aussi rajouter une classe sur ton élément sauf si tu arrive a faire un sélecteur assez précis.

<style type="text/css">
@media (max-width: 300px) {
  .toto {
    color: #26b72b;
  }
}
</style>
<span class="toto" style="font-family: 'mapolice', cursive;  font-weight: normal; color : #6EC1E4; font-size: 80px; line-height: 80%; text-shadow: grey 0.01em 0.02em 0.03em">Les Programmes</span>


Sinon, juste pour être sur, on est d'accord que c'est "moche" de procéder ainsi et qu'il faudrait faire une feuille de style indépendante si tu pouvais hein ? Smiley lol
Merci pour la réponse, les tests que j'avais fait avec toutes les syntaxes ne donnaient rien Smiley cligne oui, c'est pas académique, mais c'est le plus rapide ^^Je vais faire des blocs différents et responsive en display none Smiley cligne
Modifié par XCD06 (17 Apr 2021 - 11:48)
Ps ... Par contre , comment conserver la même police en affichage sur mobile et pc..? la police proposée s'affiche sur mon pc, mais pas de la même façon sur mobile..?
J'imagine que c'est parce qu'elle n'est pas "stockée", mais il doit y avoir une solution.. nan..? ^^
Modérateur
Alors,

Il faut utiliser @font-face dans le CSS pour faire une webfont custom et pouvoir l'utiliser (il faut aussi l'insérer dans une feuille CSS ou une balise <style>). Ici font-family: 'mapolice' fait appelle à la font mapolice qui est effectivement en local sur ton PC (tu as du l'installer). Ta balise link n'a aucun effet c'est pour ca que sur mobile tu ne l'as pas.
Hop un peu de lecture : https://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html

a écrit :
oui, c'est pas académique, mais c'est le plus rapide

Non pas vraiment... à débuguer c'est un enfer et à lire et maintenir également. Si c'est faitment juste une question de "plus rapide" c'est une mauvaise idée... Tu as peut être l'impression de gagner du temps mais les 10 secondes que tu peut perdre pour creer un fichier externe vont se chiffrer en minutes voir en heure plus tard. Mais tu fais comme tu veux, tu verras bien Smiley lol

Bonne soirée
Meilleure solution
Sujet clos
Aller à