Question faire des blocs alignés responsive

  • anncycherry
  • Portrait de anncycherry Auteur du sujet
  • Hors Ligne
  • Nouveau membre
  • Nouveau membre
Plus d'informations
19 Juil 2017 16:00 #1 par anncycherry
faire des blocs alignés responsive a été créé par anncycherry
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 !

Connectez-vous ou Créer un compte pour participer à la conversation.

Plus d'informations
20 Juil 2017 17:23 #2 par serge
Réponse de serge sur le sujet faire des blocs alignés responsive
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.

Connectez-vous ou Créer un compte pour participer à la conversation.

Plus d'informations
31 Juil 2017 14:03 #3 par tramber91
Réponse de tramber91 sur le sujet faire des blocs alignés responsive
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

@+

Pas de support en MP sans y être invité. Merci
Merci de vous conformer aux règles du forum. Un merci, Cela fait toujours plaisir ;)
www.en-toutes-lettres.fr - Digital

Connectez-vous ou Créer un compte pour participer à la conversation.

  • Vous ne pouvez pas: Créer un nouveau sujet.
  • Vous ne pouvez pas: Répondre au sujet.
  • Vous ne pouvez pas: Éditer votre message.
Modérateurs: lavstephxillibittramber91Scottuxsergestarter
Temps de génération de la page : 0.601 secondes