28172 sujets

CSS et mise en forme, CSS3

[Résolu] Forcer un retour à la ligne de span sur mobile

Bonjour,

J'ai besoin de votre aide pour un truc simple je pense :
Dans mon footer, j'ai saisi ça : 

<div class="foot-mob">
<span><i class="fa fa-phone"></i>  +33 0 00 00 00  <i class="fa fa-envelope"></i>  email-destinataire@email.com</a></span> 
<span style="padding-left: 30px;"> Mentions légales</span> 
</div>


Sur mobile, ça apparaît en ligne donc ça coupe au milieu de l'email. Je voudrais les 3 items en dessous de l'autre et centrés : tél / email / mentions légales.

Quelle css mettre à ma classe foot-mob ?
Merci de votre aide et excellente fin de journée
Salut un truc bien dégueu mais qui devrait faire ce que tu veux Smiley smile 


<div class="foot-mob">
<span style="float:left;">email-destinataire@email.com</a></span><span style="float:left;"><i class="fa fa-phone"></i>  +33 0 00 00 00  <i class="fa fa-envelope"></i> </span> 
<span style="float:right;"> Mentions légales</span> 
</div>


l'idéal serait d'utiliser un estructure plus complexe et des médias queries Smiley cligne
Bonjour,
les éléments les uns en-dessous des autres?… moi, je pense plutôt à une liste.

Mais j'avoue que votre HTML me laisse perplexe… des balises 'i' qui n'entourent rien, une balise fermante de lien alors qu'il n'y a pas de balise ouvrante…

Smiley confus
Zelena a écrit :
J'avoue que votre HTML me laisse perplexe… des balises 'i' qui n'entourent rien...

C'est une technique ancienne pour afficher des icônes, les adeptes de cette technique estimant pratique d'utiliser un élément html court à écrire, sans trop d'impact sur la sémantique. Mais personnellement je ne suis pas d'accord pour détourner ainsi cette balise de son usage et lui préfère de loin un span.

Quand à la balise de lien, elle a été effacée par souci de préserver l'anonymat, mais le tag a été effacée avec l'attribut href...
Modifié par Olivier C (10 Nov 2017 - 06:47)
Donc :
.foot-mob a {
    display: block;
}

Et du coup pas besoin de media queries et ça marche aussi pour les mentions légales (qui ont le même problème). Mais nous sommes bien d'accord, c'est une rustine posée sur un code très sale (des spans ajoutés uniquement pour apposer un style, etc.).

D'ailleurs, sur les pages du site, l'utilisation d'un thème dénommé fusion (en plus du thème de base "Avada") conduit à du html proprement hallucinant :
<div class="fusion-fullwidth fullwidth-box nonhundred-percent-fullwidth" style="background-color: rgba(255,255,255,0);background-position: center center;background-repeat: no-repeat;padding-top:85px;padding-right:30px;padding-bottom:0px;padding-left:30px;margin-bottom: 40px;"><div class="fusion-builder-row fusion-row "><div class="fusion-layout-column fusion_builder_column fusion_builder_column_1_4  fusion-one-fourth fusion-column-first 1_4" style="margin-top:0px;margin-bottom:20px;width:25%;width:calc(25% - ( ( 4% + 4% ) * 0.25 ) );margin-right: 4%;">
					<div class="fusion-column-wrapper" style="padding: 0px 0px 0px 0px;background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;" data-bg-url="">
						<span class="fusion-imageframe imageframe-none imageframe-1 hover-type-none"><img src="https://lirenlaque.com/wp-content/uploads/2017/09/Cours1.jpg" width="320" height="274" alt="Lire en Laque - Sarah Mélina Clair - Cours" title="Cours1" class="img-responsive wp-image-1530" srcset="https://lirenlaque.com/wp-content/uploads/2017/09/Cours1-200x171.jpg 200w,  https://lirenlaque.com/wp-content/uploads/2017/09/Cours1.jpg  320w" sizes="(max-width: 800px) 100vw, 1170px"></span><div class="fusion-clearfix"></div>

					</div>
				</div><div class="fusion-layout-column fusion_builder_column fusion_builder_column_2_5  fusion-two-fifth 2_5" style="margin-top:0px;margin-bottom:20px;width:40%;width:calc(40% - ( ( 4% + 4% ) * 0.4 ) );margin-right: 4%;">
					<div class="fusion-column-wrapper" style="padding: 0px 0px 0px 0px;background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;" data-bg-url="">
						<p style="font-size: 24px;">Rigueur et émerveillement</p>

Modifié par Olivier C (10 Nov 2017 - 07:18)
Bonjour Olivier,

Merci pour le code !
C'est la 1ère fois que j'utilise Avada (d'hab je travaille avec Enfold), j'ai téléchargé le thème, importé une démo et Fusion est inclus...
Bonne journée
Marine
Sujet clos
Aller à