WordPress : Comment implémenter le code du widget bootstrap pour l’en-tête personnalisé dans WordPress ?
Je travaille sur le site, je ne suis pas un pro du bootstrap. Voici l’en-tête que j’ai avec le thème :
Je souhaite remplacer l’adresse par 3 petites images png, à savoir BBB A + Accredited Business et Google Partner.
Comme ça : (Photoshopé)
Voici le code du widget :
<div class="col-xs-12 col-sm-9 col-lg-10 start-xs start-sm">
<aside id="text-3" class="widget header-right widget_text">
<div class="textwidget">
<div class="container extra-info">
<div class="row">
<div class="col-sm-5 col-md-5">
<i class="fa fa-phone"></i>
<div class="phone">
<h3>1-775-97-377</h3>
<span>info@thememove.com</span>
</div>
</div>
<div class="col-sm-7 col-md-6">
<i class="fa fa-home"></i>
<div class="address">
<h3>14 Tottenham Court Road</h3>
<span>London, England.</span>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
Pourriez-vous s’il vous plaît me faire savoir quels seront les bons tags et le bon code que je peux utiliser ? J’ai aussi un problème d’alignement ! col-md
, je veux le cacher dans la version mobile (peut-être col-xs
)
L’aide sera vraiment appréciée!
Solution n°1 trouvée
Essayez de remplacer le contenu de l’adresse par une autre ligne et les trois divs comme ci-dessous. N’oubliez pas que les colonnes doivent totaliser 12 pour que la grille fonctionne comme il se doit.
<div class="address">
<div class="row">
<div class="col-md-4">logo here</div>
<div class="col-md-4">logo here</div>
<div class="col-md-4">logo here</div>
</div>
En ce qui concerne également le masquage des colonnes, je sais que bootstrap a différentes manières de le faire avec l’ajout de leurs classes, mais examine également les requêtes multimédias.
@media only screen and (max-width: 960px) {
.whatever {
display:none;
}
}
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
0 commentaire