[Résolu] Positionner des éléments pour version mobile

Bonjour,

je viens vers vous concernant un positionnement d'éléments relatifs aux présentations sur mobile.
Je travaille sur le thème "twenty fourteen" de Wordpress dans le but d'apprendre à le maitriser mais euh... bah je galère un peu en fait

Alors voilà, je dois décomposer mon header en deux colonnes distinctes.
- La première contient mon logo (codes dh thème par défaut).
- la seconde contient des icônes relatives aux réseaux sociaux et sous ces dernières, le formulaire de recherche.

Pour afficher tout cela correctement en version "ordinateur". J'ai placé ma seconde colonne en "float:rigfht;" pour qu'elle s'affiche à droite de l'écran et à la même hauteur que le logo.

Jusqu'ici tout va bien. Là ou le bas blesse, c'est dès qu'on visionne le site sur mobile, la propriété float est conservée alors que je souhaiterai que la seconde colonne vienne se glisser en position centrale sous logo (que j'aimerais aussi pouvoir centrer...)

Je suis tombé sur l'article de Raphael titré: "Une feuille de styles de base pour le Web mobile" que j'ai tâché de suivre, mais en fait c'est le même principe que celui utilisé dans twenty-fourteen... donc ce qu'il me faut c'est pas un truc tout fait mais plutôt comprendre comment faire pour annuler une mise en forme dédiée à un type d'écran (ici pc du bureau) et en créer une nouvelle pour dédiée à un autre type d'écran genre smartphone.

Voilà, je vous remercie d'avance pour l'aide que vous pourrez m'apporter. Je poursuis mes tests à l'aveuglette car je n'ai pas encore trouvé mon bonheur en terme d'explication pour répondre à mon besoin.


Bonne journée à vous

Salut,

Tu peux mettre

 float:none;

pour annuler le

float :right;

Il faut que tu pense avant de faire tes lignes de codes html et css comment vont bouger tes éléments selon les écrans et supports. ça te permettra de mieux définir leurs propriétés ..

Bonjour Blond1n,


en fait c'est ce que je souhaiterai faire, mais ou placer le "float:none;" ? Si je l'affecte d'entrée de jeu à ma box, elle ne s'alignera pas à droite en version PC.

En fait je pense être ok pour le positionnement des éléments mais je bug sur la manière d'attribuer différents styles en fonction du support de consultation...

Je suis un boulet et je le resterai....

Bon, alors mine de rien, le fait de poser ma question (je bloque sur le problème depuis mercredi dernier....) m'a finalement aidé à remettre les choses en ordre...

J'avais bien capté le fonctionnement de la feuille de style pour mobile et j'avais bien crée la règle pour que ma box ne soit plus collée à droite mais centrée sur toute la largeur de la page mobile... simplement, avec un text-align:right, bah forcément, toutes mes icônes restaient collées à droite. Le problème ne venait donc pas du float qui était bien annulé mais du text-align auquel je ne pensais plus du tout.

Sujet résolu, désolé pour la gêne occasionnée... je vais de ce pas m'acheter une corde

héhé ça arrive à tous le monde ce genre de truc, on ne voit plus grand chose à force de rester devant un écran pourtant lumineux !

C'est tellement vrai

Bonjour!

J'utilise aussi le thème twenty fourteen (un thème child) et j'ai un problème avec l'affichage sur mobiles, j'espère que tu pourras m'aider.

C'est que la barre latérale de gauche va se positionner en bas quand l'écran est petit. Comment faire pour changer ça, et la mettre plutôt au-dessus?
Je ne m'y connais pas fort en php et css mais j'ai cherché comme j'ai pu, sans trouver.

Merci et bonne journée!

Bonjour Rschelk,

Tout d'abord permets moi de te présenter mes excuses de te répondre si tardivement. Je n'étais pas en mesure de te répondre quand j'ai reçu la notification de ton message et après cela m'est complètement sorti de la tête.

Ton problème est-il toujours d'actualité ? Pour ma part j'ai mis de côté le thème 2014 qui ne me convient pas mais j'avais tout de même réussi à régler les petits soucis qui me gachaient la vie donc si je peux t'aider ce sera avec plaisir.

Cordialement


Bruno