28172 sujets

CSS et mise en forme, CSS3

Problème de media query pour une débutante

Bonjour à tous,

Je débute complètement en programmation dû à des contraintes professionnelles, du coup beaucoup de choses m'échappent encore. Cette question a du être vue, vue et re-vue mais en farfouillant partout impossible de trouver LA réponse qui correspond à mon problème.

Je vais tenter d'être la plus claire possible, vos solutions/conseils sont les bienvenus et je vous serai éternellement reconnaissante.


Alors, pour le site j'ai une base qui a été faite par un webdesigner mais je ne sais pas à partir de quoi. J'ai juste les fichiers "bruts" sur lesquels je bidouille le code pour finaliser le projet.

Nous souhaitons proposer un catalogue simple, pour cela, sur la page déjà existante, j'ai intégré une fonction accordéon avec bootstrap (j'ai donc ajouté un css).

Cf. image > upload/1495106551-65755-capturedaeacran2017-05-18aa13.png


Sauf que quand je réduis ma résolution, mes images ne vont pas à la ligne et je m'arrache les cheveux à trouver comment faire

cf image > upload/1495106644-65755-capturedaeacran2017-05-18aa13.png

Mon problème est que je ne sais pas vers quoi/qui je dois référer ma media query : au contenu de l'accordéon ? ou à la <div 4u> que vous pourrez retrouvez dans mon screen shoot du html

cf image du html > upload/1495109938-65755-capturedaeacran2017-05-18aa14.png

Par ailleurs, dans le main.css fait par le webdesigner, au niveau de la "grille" il n'y a que des "row" et des "u". est-ce normal? ne devrait-il pas non plus y avoir des "column" ?

Je suis un peu perdue... j'ai essayé la fonction inline-block appliqué à "4u" mais ça ne fonctionne pas. Je pense que je ne dois pas l'adresser à ça..

Un immense merci par avance pour vos réponses !
Bonjour,
Tes images sont des iframes ?
Je connais bootstrap mais je ne comprend pas les "4u"...
Normalement c'est :
<div class="container">
<div class="row">
<div class="col-md-6">ceci est un exemple, ça peut être col-md-2, col-lg-6 suivant tes besoins (voir le site de bootstrap)</div>
<div class="col-md-6"></div>
</div>
</div>
Bonjour , faut utilliser les media query
ex :

soit mydiv l'enveloppe qui contient tes images
soit 400px la résolution sur ta photo(mode mobile) 


/*quand on réduit la résolution (0 à 400px) 400px inclus */
@media screen and (max-width : 400px)
{
  #mydiv img { display: block; } /*ne pas oublier le point virugule*/
}

/*quand on agrandit de plus de 400px  (400px non inclus, donc à partir de 401px) */
@media screen and (min-width : 401px)
{
  #mydiv img { display: inline-block; } 
}

ATTENTION: Ne pas oublier la règle des priorités
une propriété CSS dans le html est prioritaire par rapport à celle dans un fichier css
ex :
fichier html

<div style="background-color:red;" id="test">


fichier CSS

#test {background-color:yellow}



La propriété <<background-color :red; >> est prioritaire par rapport à <<background-color:yellow; >>
Modifié par JohnNes (19 May 2017 - 11:56)
Sujet clos
Aller à