AMéliorer un span pour la version mobile

Support Général

MickaelFR Membre non connecté

Booster Fusée

Le 03/02/2018 à 16h48

#160955

Booster Fusée
Voir le profil du membre MickaelFR
Inscrit le : 20/01/2014
Site internet
Groupes :

Bonjour.

Après une bonne remarque de Olivier, je me retrouve avec un <span> qui fait désordre en mobile.

Code HTML :

<span style="text-align:center;font-size: 1.1em;background-color: #d2a34e;padding: 20px;border: 1px solid #366393;border-radius: 4px;box-shadow: 0px 2px 4px #ddd;color: #000;">Chers visiteurs. En tant que simple visiteur, vous n'avez pas accès à toutes les fonctionnalitées du site. 
C'est dommage non? Veuillez donc vous connecter, ou vous inscrire, c'est gratuit, et sans pubs !</span>

J'aurai pu créer une forme de css pour ne pas que ce soit voyant pour les visiteurs en mobile, mais bon, c'est un message pour eux, c'est donc un peu bête.

Comment remédier à ça de façon propre? Je ne vois pas ce que je peux faire.

Merci par avance.

Édité par MickaelFR Le 04/02/2018 à 07h56

planet-truck.fr - mickaelfr.eu

ElenWii Membre non connecté

Equipe Graphique Administrateur

Le 03/02/2018 à 23h57

#160959

Administrateur
Voir le profil du membre ElenWii
Inscrit le : 14/08/2009
Site internet
Groupes :
Equipe Graphique

Je pense que ton code style est pas bon. Tu as des déclaration d'autre class dedans.

Je ne sais pas comment tu insère ce code, mais l'ideal serait de faire une class CSS sur ton span et de faire les déclarations dans un fichier css.

MickaelFR Membre non connecté

Booster Fusée

Le 04/02/2018 à 07h55

#160960

Booster Fusée
Voir le profil du membre MickaelFR
Inscrit le : 20/01/2014
Site internet
Groupes :

Salut.

Non je me suis trompé dans ce code, deux choses ce sont copié désolé. Voici le vrai span en ligne :

Code HTML :

<span style="text-align:center;font-size: 1.1em;background-color: #d2a34e;padding: 20px;border: 1px solid #366393;border-radius: 4px;box-shadow: 0px 2px 4px #ddd;color: #000;">Chers visiteurs. En tant que simple visiteur, vous n'avez pas accès à toutes les fonctionnalitées du site. 
C'est dommage non? Veuillez donc vous connecter, ou vous inscrire, c'est gratuit, et sans pubs !</span>

Cependant, je ne sais pas comment l'adapter sur mobile.

Édité par MickaelFR Le 04/02/2018 à 07h56

planet-truck.fr - mickaelfr.eu

babsolune Membre non connecté

Administrateur

Le 04/02/2018 à 09h20

#160964

Administrateur
Voir le profil du membre babsolune
Inscrit le : 16/05/2008
Site internet
Groupes :

c'est toute l'utilité du css

remplace ton style="...." par un class="MaClass"

et maintenant tu peux gérer pc et mobile grâce aux media queries dans un des fichiers css

Code CSS :

.MaClass {
    text-align:center;
    font-size: 1.1em;
    background-color: #d2a34e;
    padding: 20px;
    color: #000;
}
 
@media (min-width: 769px) {
    .MaClass {
        border: 1px solid #366393;
        border-radius: 4px;
        box-shadow: 0px 2px 4px #ddd;
    }
}

Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site

MickaelFR Membre non connecté

Booster Fusée

Le 04/02/2018 à 09h46

#160967

Booster Fusée
Voir le profil du membre MickaelFR
Inscrit le : 20/01/2014
Site internet
Groupes :

Merci beaucoup, mais j'ai le même problème sur mobile, c'est pour exactement ça que je demandais de l'aide, car le CSS j'aurai trouvé. Mais je ne sais pas comment changer le paramètre pour que sur mobile ça saccade pas comme actuellement

La seule solution que moi je connais, c'est de créer deux classes, et de cacher ou montrer selon sa résolution, avec des messages plus court, mais bon, pas top ma solution.

Édité par MickaelFR Le 04/02/2018 à 09h47

planet-truck.fr - mickaelfr.eu

babsolune Membre non connecté

Administrateur

Le 04/02/2018 à 10h46

#160969

Administrateur
Voir le profil du membre babsolune
Inscrit le : 16/05/2008
Site internet
Groupes :

c'est parce que span ...
il faut que soit tu le passes en display:block (<a href="http://prntscr.com/i9w1ms">sans</a> | <a href="http://prntscr.com/i9w246">avec</a>) soit que tu remplaces en div ou p au lieu de span

Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site

MickaelFR Membre non connecté

Booster Fusée

Le 04/02/2018 à 11h05

#160970

Booster Fusée
Voir le profil du membre MickaelFR
Inscrit le : 20/01/2014
Site internet
Groupes :

Salut et merci. Le problème, c'est que avec ça (span, div ou p), cela prend toute la largeur du site avec le display:block .. Et même avec un width, je n'arrive pas à réduire. Bon, c'est pas très grave, mais c'est juste imposant. Puis, il faut que j’apprenne