Réponse Conteneur CSS perdre la marge à la taille de la tablette seulement

Question

J'ai le CSS suivant qui est conçu pour redimensionner un certain nombre de colonnes à taille moyenne, puis les articles pleine largeur à petite taille/mobile. Tout semble fonctionner, sauf qu'à la taille moyenne/tablette, margin-top (par exemple) sur le conteneur externe, avec la classe .columnContainer, est apparemment rejeté.

J'ai essayé tout ce que je pouvais penser pour comprendre cela, et j'ai frappé un mur de briques. Merci d'avance pour toute aide, et vous pouvez jouer avec le CSS ici: https://jsfiddle.net/xvLmhfpa/

// This is getting stripped at medium size only! 
.columnContainer { margin-top: 20px } 

// Large size 
@media all and (min-width: 768px) { 

    .columnContainer { 
    display: table; 
    width: 100%; 
    } 
    .columnContainer > div { 
    display: table-cell; 
    } 

} 

// Medium/tablet size 
@media all and (max-width: 767px) and (min-width: 481px) { 

    .columnContainer { 
    width: 100%; 
    } 

    .columnContainer > div { 
    float: left; 
    width: 100%; 
    } 

    .columnContainer.collapse2 > div { width: 50%; } 
    .columnContainer.collapse2 div:nth-child(2n+1) { clear: both; } 
    .columnContainer.collapse3 > div { width: 33.33%; } 
    .columnContainer.collapse3 div:nth-child(3n+1) { clear: both; } 
    .columnContainer.collapse4 > div { width: 25%; } 
    .columnContainer.collapse4 div:nth-child(4n+1) { clear: both; } 
    .columnContainer.collapse5 > div { width: 20%; } 
    .columnContainer.collapse5 div:nth-child(5n+1) { clear: both; } 
    .columnContainer.collapse6 > div { width: 20%; } 
    .columnContainer.collapse6 div:nth-child(5n+1) { clear: both; } 
} 

// Small/mobile size 
@media all and (max-width: 480px) { 
    .columnContainer > div { width: 100% } 
} 

Answer 1

Son parce que vous avez dans votre float:left de taille moyenne .. Ajouter display:inline-block dans le div ..

@media all and (max-width: 767px) and (min-width: 481px) { 

.columnContainer { 
    width: 100%; 
    display:inline-block; 
    } 

    .columnContainer > div { 
    float:left; 
    width: 100%; 
    } 

Voici la mise à jour fiddle ..