Problème mise en positionne responsive grille bootstrap

Par killianvlt, il y a 10 ans

Les bases HTML/CSS

Bonsoir à tous,

J'ai un problème au niveau du responsive de ma balise article. J'ai cherché de mon côté et j'ai trouvé aucune solution.
Mon problème :.

Voici le HTML :

<article class="article col-md-12"> <h1 class="title_news">Jean</h1> <hr class="hr"> <p>In a first ever statement of this kind, Santa Clause has stated that he is imposing a lifetime Christmas present embargo on Darren P Smith, after stating that he was "simply appalled" with the behaviour of Darren Smith over the last year. One of Santa's inner circle of elves told the Polar Paper: "I've never seen Santa this irate before. He was shouting with rage so much that his cheeks turned purple and his beard was covered in little flecks of spittle. Darren Smith must have done some pretty naughty things to make him this furious. I mean, a lifetime ban on Christmas presents - it's unheard of!". Considerable speculation has circulated regarding precisely what it is that Darren Smith did to arouse Santa's wrath, but no clear answers have emerged. </p> <p> Local resident Katie Nicholson turned 50 today and officially joins the ranks of the wrinkly oldies. When asked how she felt, Ms Nicholson said "Oh, it's not so bad turning 50. Sure my joints ache, my hair is greying, and I suffer from hot flashes, but I'm so forgetful these days that I hardly remember to notice the discomfort. In fact, my memory's so bad that I probably won't even remember having this conversation with you. Who are you again, by the way?". Residents have been celebrating Ms Nicholson's birthday, for more reasons than one - her birthday is expected to provide a small boost to the city's economy, as she will soon be looking to purchase new spectacles, arthritis cream, extra-strength wrinkle lotion, and a zimmer frame. </p> </article>

Voici le CSS :

article { background: #C5EFF7; width: 80em; margin-left: 350px; overflow: none; }

Je vous remercie de m'aidé. En espérant qu'une personne réponde à ce sujet.

Cordialement.

14 réponses

kal-el, il y a 10 ans

Avant de pouvoir t'aider, il faudrait que tu nous donne un peu plus de détails. Qu'est-ce que tu veux réussir à faire?

santo17, il y a 10 ans

Salut DarkofWarfare, je sais pas trop ce que tu veux faire mais si tu vexu que le background s'adapte à lécran, faudra ajouter:

background-size: cover;
betaWeb, il y a 10 ans

Salut @DarkofWarfare,

Est-ce que tu as entouré ta balise article d'un élément (par exemple un DIV) ayant la classe "row" ?

killianvlt, il y a 10 ans

Salut,

En faites, quand je réduis ma fenêtre, la balise article ne s'adapte pas au navigateur.
Exemple :

En gros, j'aimerais que la div article s'adapte à la fenêtre.

betaWeb, il y a 10 ans

Alors premièrement tu ne réponds pas à notre question, et deuxièmement c'est normal, tu me gères pas les petits devices via les classes "col-xs-XX" et "col-sm-XX". Et puis c'est une balise "article" et non une "div article" ;)

killianvlt, il y a 10 ans

D'accord, merci ! Pour répondre à ta question, j'avais entouré ma balise d'une classe row :).

betaWeb, il y a 10 ans

Tu as compris comment fonctionne le système de grid de Bootstrap ?

santo17, il y a 10 ans

En fait comme l'a dit @betaWeb, tu ne gères pas les petits devices. De plus, tu lui donnes une marge exterieure gauche de 350px. Du coup, même quand tu reduis l'écran, il applique la marge(margin-left). Le plus simple est de gérer cela avec les media queries en faisant:

@media screen and (max-width:480px) { .article{ margin-left:0; //ou encore pour qu'il soit centrer margin:0 auto } }
killianvlt, il y a 10 ans

Un petit peu. Je débute dans le milieu de ce framework ;) .

killianvlt, il y a 10 ans

Je vous remercie de votre aide, j'essaye et je vous dis si cela rend bien :)

killianvlt, il y a 10 ans

Enfaite avec Bootstrap, je pensais pas avoir besoin des @media

Lartak, il y a 10 ans

Enfaite avec Bootstrap, je pensais pas avoir besoin des @media

Tu n'as pas besoin d'ajouter des @media, dans plusieurs cas :

  • Si tu utilises correctement les classes disponibles, avec les éléments HTML indiqués lorsque c'est nécessaire
  • Si tu utilises les classes concernant le responsive lorsque tu veux qu'un affichage soit différent selon le support de l'internaute ou la résolution
  • Si tu n'utilises pas des classes personnalisées en plus de celles de Bootstrap, qui peuvent interférées avec celles-ci
betaWeb, il y a 10 ans

Ca dépend de tes points d'arrêt en fait. Bootstrap gère jusqu'à 768px, pas plus petit. Donc il vaut mieux, si tu décides d'utiliser BS, t'y adapter plutôt que de faire à ta sauce.

De plus, je ne comprends pas pourquoi tu attribues un width de 80em en dur alors que tu mets la classe "col-md-12" qui va fixer le width à 100% automatiquement. Et au lieu de mettre un margin-left en dur, utilises les classes de BS:

<article class="article col-md-8 col-md-offset-2"> <!-- Le reste ici --> </article>
killianvlt, il y a 10 ans

Je te remercie ! Je suis un débutant encore avec les grilles ^^