faire des blocs alignés responsive

Bonjour à tous !

Avant toute chose : ma question n'est pas forcément relative à Joomla, mais puisque mon site est sur Joomla, je me suis permise de poster.

J'ai une petite question : j'ai tenté de faire une page "témoignages" de mon site internet. Je voulais avoir 3 blocs alignés, dans chacun la photo de la personne, en dessous son avis, puis encore en dessous son nom. Voici ce que j'ai fait dans la partie article :

<div class="uk-width-1-3 uk-text-justify uk-float-right">
<p><img src="monimage" alt="" width="150" height="150" style="display: block; margin-left: auto; margin-right: auto; border: 2px solid #323847;" /></p>
<dl><dt class="uk-margin-left uk-margin-right tm-block-default">Bla blabla</dt></dl>
<h6 class="uk-form-width-medium uk-align-center" style="text-align: right;">Prénom nom</h6>
<hr /><br />
<p><img src="monimage" alt="" width="199" height="150" style="transform: rotate(90deg); display: block; margin: auto; border: 2px solid #323847;" hidden="" /></p>
<br /><dl><dt class="uk-margin-left uk-margin-right tm-block-default">bla bla bla</dt></dl>
<h6 class="uk-form-width-medium uk-align-center" style="text-align: right;">Prénom Nom</h6>
<hr /><br />
<p><img src="monimage" alt="" width="200" height="150" style="margin: auto; border: 2px solid #323847; display: block;" /></p>
<dl><dt class="uk-margin-left uk-margin-right tm-block-default">blablabla </dt></dl>
<h6 class="uk-form-width-medium uk-align-center" style="text-align: right;"> Prénom Nom</h6>
<hr /></div>
<div class="uk-width-1-3 uk-text-justify uk-float-right ">
<p><img src="monimage" alt="ehrlacher" width="196" height="150" style="display: block; margin-left: auto; margin-right: auto; border: 2px solid #323847;" /></p>
<dl><dt class="uk-margin-left uk-margin-right tm-block-default">blablabla</dt></dl>
<h6 class="uk-form-width-medium uk-align-center" style="text-align: right;">Prénom nom</h6>
<hr /><br />
<p><img src="monimage" alt="" width="225" height="150" style="display: block; margin-left: auto; margin-right: auto; border: 2px solid #323847;" /></p>
<dl><dt class=" uk-margin-left uk-margin-right tm-block-default">bla bla bla</dt></dl>
<h6 class="uk-form-width-medium uk-align-center" style="text-align: right;">Prénom nom</h6>
</div>
<div class="uk-width-1-3 uk-text-justify display:inline">
<p><img src="monimage" alt="" width="200" height="150" style="transform: rotate(180deg); display: block; margin-left: auto; margin-right: auto; border: 2px solid #323847;" /></p>
<dl><dt class=" uk-margin-left uk-margin-right tm-block-default"> bla bla bla</dt></dl>
<h6 class="uk-form-width-medium uk-align-center" style="text-align: right;">Prénom nom</h6>
<hr /><br />
<p><img src="monimage" alt="" width="150" height="auto" style="display: block; margin-left: auto; margin-right: auto; border: 2px solid #323847;" /></p>
<dl><dt class=" uk-margin-left uk-margin-right tm-block-default"> bla bla bla</dt></dl>
<h6 class="uk-form-width-medium uk-align-center" style="text-align: right;">Prénom nom</h6>
<hr /><br />
<p><img src="monimage" alt="monimage" width="219" height="150" style="display: block; margin-left: auto; margin-right: auto; border: 2px solid #323847;" /></p>
<dl><dt class=" uk-margin-left uk-margin-right tm-block-default">Bla bla bla</dt></dl>
<h6 class="uk-form-width-medium uk-align-center" style="text-align: right;">Prénom nom</h6>
</div>[/code]

Je souhaiterais avoir votre avis, si ça fait pas trop "fait maison" ou s'il ne s'agit pas d'une mauvaise pratique. En fait mon problème principal, c'est que ce n'est pas responsive du tout. Sur smartphone c'est très moche, surtout que les modifications css de mes images n'apparaissent pas (comme vous pouvez le constater, j'ai du retourner des images avec le css).

J'aimerais par exemple que sur le smartphone, il n'y ait pas trois blocs alignés mais que les avis soient tous à la suite. j'ai entendu parler de media queries, mais je sais pas trop comment le mettre en pratique pour mon cas. (Soyez indulgents, je viens tout juste de comprendre comment on modifiait le css dans Joomla ^^) Une âme charitable pour me conseiller ?

Merci et très bonne journée !

bonjour,
je ne sais pas d'ou sort ce code mais c'est du code uikit
getuikit.com/v2/docs/utility.html
si c'est issu d'un template, voir avec le créateur.

Bonjour

Serge à raison
Il nous faudrait au moins le nom du template pour savoir si celui-ci ne gère pas via ses css des blocks responsives

@+