28172 sujets

CSS et mise en forme, CSS3

Knacss - largeur 1140px et responsive

Bonjour,

J'ai un problème avec le responsive et Knacss.
J'ai un parent à qui j'assigne la largeur de 1140px (w1140p). Quand je teste son adaptation aux écrans plus petits, j'ai un scroll horizontale qui apparait... puis disparait (enfin) quand je continue de réduire la taille de l'écran.

Voici le code :

 <section class="ligne2">
        
        <section class="w1140p center tiny-w100 small-w100">
            <section class="grid-3-tiny-1-small-1 mtl ">
           
       <article >
                      <p>Lorem ipsum dolor sit amet, quam duis sed amet odio. Amet parturient, felis eros vulputate placerat enim felis, porta integer massa mauris ante consequat deserunt, id ad nulla a. Sit in velit libero scelerisque, ante quam tellus in, ullamcorper in non, justo justo turpis ac lacus dictumst metus, ac cum. Erat sollicitudin integer vitae et, ligula sed aliquam duis nulla, sodales nec at. Integer risus, id justo sollicitudin tristique potenti urna orci, cras interdum potenti potenti.</p>
                      
                       </article>
           
         <article >
                       <p>Lorem ipsum dolor sit amet, quam duis sed amet odio. Amet parturient, felis eros vulputate placerat enim felis, porta integer massa mauris ante consequat deserunt, id ad nulla a. Sit in velit libero scelerisque, ante quam tellus in, ullamcorper in non, justo justo turpis ac lacus dictumst metus, ac cum. Erat sollicitudin integer vitae et, ligula sed aliquam duis nulla, sodales nec at. Integer risus, id justo sollicitudin tristique potenti urna orci, cras interdum potenti potenti.</p>
                     
                       </article>
                
                
           <article >
                      <p>Lorem ipsum dolor sit amet, quam duis sed amet odio. Amet parturient, felis eros vulputate placerat enim felis, porta integer massa mauris ante consequat deserunt, id ad nulla a. Sit in velit libero scelerisque, ante quam tellus in, ullamcorper in non, justo justo turpis ac lacus dictumst metus, ac cum. Erat sollicitudin integer vitae et, ligula sed aliquam duis nulla, sodales nec at. Integer risus, id justo sollicitudin tristique potenti urna orci, cras interdum potenti potenti.</p>
                     
                       </article>
              
       
             </section>
              </section>
           </section>


Merci pour votre aide...
Modifié par lodemars (17 Feb 2016 - 08:43)
Administrateur
Bonjour,

en collant ton code dans un Codepen, je n'ai réussi à le prendre en défaut ni avec Firefox ni avec Chrome : http://codepen.io/anon/pen/wMZJrM
Est-ce que tu aurais une valeur pécise de la largeur à laquelle ça se produit (Firefox avec une vraie page et pas un Codepen : Shift-Ctrl-M et largeur et hauteur sont alors préccisément indiquées mais la scrollbar est beaucoup moins visible par contre (snif))
Bonjour avec un width de 1140px normal que tu un scroll horizontale ! utilise un max-width
.w1140p {
    max-width: 1140px;
}

Smiley biggrin
Modifié par bibi67 (17 Feb 2016 - 17:15)
Merci (et désolé pour repondre si tardivement)

J'ai testé ta suggestion, ça a l'air de marcher.
Du coup pourquoi cette valeur n'est-elle pas par défaut dans Knacss?
Sans parler de knacss et selon les contextes ( à préciser ) ; quelles sont les règles qui permettent de savoir que des scrollbar vont apparaitre horizontalement et verticalement ?

merci
75lionel a écrit :
Sans parler de knacss et selon les contextes ( à préciser ) ; quelles sont les règles qui permettent de savoir que des scrollbar vont apparaitre horizontalement et verticalement ?

merci
Je dirais lorsqu'une dimension est fixée à une valeur absolue supérieure à l'espace d'affichage visible.

D'où l'intérêt d'utiliser des valeurs relatives et de na pas figer les dimensions.
Sujet clos
Aller à