css avec media queries pour pour 3 pavés ?

[ortolojf]

Bonjour

J'essaye de positionner trois pavés d'après la largeur de l'écran.
Voici le code html :

  <div class="interface_services">
   <div class= "service">
   Pavé1
   </div>
   <div class= "other_service">
    Pavé2
   </div>
  <div class= "service">
   Pavé3
 </div>
</div>

Si largeur < 760px, Pavé1 et Pavé3 doivent être côte à côte, en dessous de Pavé2.

Si largeur > 760px, Pavé 1, 2 et 3 doivent être côte à côte.

Dans tous les cas, les pavés côte à côte doivent être alignés par le bas.

Le tout doit être centré.

J'ai essayé float:left; pour > 760px, mais pas d'alignement possible par le bas.

J'ai essayé table pour interface_services et table-cell pour les autres ( > 760 px ), çà marche, mais avec inline-block ou block pour interface_services et other_service, çà me fait un étalage maison.

Comment résoudre ce petit problème css ?

Merci beaucoup de votre aide.

Respectueusement.

 

[spout]

Tu as essayé avec tarteaucitron ?

Si tu montrais un jsfiddle/codepen de ce que tu as testé.
Tu peux aussi essayer avec flex box.

 

[ortolojf]

Bonjour spout

Voilà un aperçu :

https://www.pronostics-courses.fr/point.html

Cà marche en > 760px, mais pas en dessous.

Merci de ton aide.

Respectueusement.

 

[ortolojf]

Rebonjour spout

J'ai vu à quoi ressemble la syntaxe de flexbox.
Je ne sais pas comment avec des mediaqueries, mettre deux lignes au lieu d'une ligne ( < 760px ).

J'ai des pavés qui ne posent pas de problèmes d'encombrement.
Sinon, si la ligne de 3 pavés était trop longue, ce serait possible avec flexbox, mais là je ne vois pas.

Respectueusement.

 

[ABCWEB]

<link rel="stylesheet" media="screen and (max-width: 760px)" href="mobile.css" />

et tu fais ton design mobile dans le mobile .css

 

[ortolojf]

Bonjour ABCWEB

Oui çà je savais déjà.
Je suis en train d'essayer avec des relative. ( un par pavé ).
Amicalement.

 

[ABCWEB]

tu peux créer 2 bloc contenant tes pavés en les alignant comme tu souhaite un normal et un mobile et tu fais un display none selon le cas

 

[ortolojf]

Bon voilà

C'est fait, avec des relative.

table, table-cell si > 760px, relative sinon.

Sacré hack.

A voir : https://www.pronostics-courses.fr/point.html

Bonbon.

Merci de votre aide;

Respectueusement

 

[elas]

de rien

 

[ortolojf]

Bonjour

Voilà c'est fait.

Voir sur mon site :

https://www.pronostics-courses.fr

C'est pour les votes et services.

Y a plus qu'à adapter les tailles de caractères, 10px est un peu faible en dessous de 640px.

Respectueusement.

 

[ortolojf]

Rebonjour

Réflexion faite j'ai des erreurs.

Sur Firefox, en mode absolute ( < 760px ) , mes transform à 50%, translate (-50%) sont mal interprétés.

Le tranform décale bien de 50% à droite, mais le translate ne fait rien.

Et puis en plus, sous mon smartphone Galaxy S4, les services autres que Google+ ne s'affichent pas.

Est-ce qu'il y a des préfixes de navigateur à mettre ?

Merci beaucoup de votre aide.

Amicalement.

 

[ortolojf]

Rebond

Bon, je me suis trompé.

Ce n'est pas Firefox sur lequel j'ai fait des essais, mais Samsung Browser.
Ce browser semble bugué avec transform: translate.

J'ai mis tous les préfixes aux transform.

Pendant que j'y suis : Est-il nécessaire de mettre transform : origin avant transform : translate ?

Et puis : Est-ce que çà rend bien avec les navigateurs courants sur smartphones ?

Merci beaucoup de vos réponses.
Respectueusement.

 

[ABCWEB]

https://developer.mozilla.org/fr/docs/Web/CSS/transform

 

[ortolojf]

Bonjour Monsieur

Et par çà, çà marche comment sur votre smartphone ?

Sur mon Galaxy S4 ( Chrome ), la page d'accueil a ces pavés qui débordent un peu à droite, mais les autres pages non.
Sur Samsung Browser c'est aussi le cas, mais les services n'apparaissent pas, et tarteaucitron ne fonctionne pas.

Je vais diminuer le padding des services.

Voici le site : https://www.pronostics-courses.fr

Merci à vous.

Respectueusement.

 

[ABCWEB]

On dirait un site des années 90..