WordPress : Comment implémenter le code du widget bootstrap pour l’en-tête personnalisé dans WordPress ?

Publié par Jean-Michel le

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 :

entrez la description de l'image ici

Je souhaite remplacer l’adresse par 3 petites images png, à savoir BBB A + Accredited Business et Google Partner.

Comme ça : (Photoshopé)
entrez la description de l'image ici

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

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *