CSS: divs not stacking

Question

Я использую Pocketgrid, чтобы сделать сайт отзывчивым.

Способ, которым работает карманный компьютер, заключается в том, что класс «тридцать блоков» должен складываться поверх класса «семьдесят блоков», когда я уменьшаю размер моего браузера до размера мобильного устройства. Но этого не происходит. Где я иду не так?

Это то, что мой HTML выглядит следующим образом:

<div class="wrapper block-group"> 

    <div class="top-bar block"> 
    <p>Some text</p> 
    </div> 

    <div class="header block-group"> 
    <div class="focus-area block-group"> 
     <div class="logo thirty-block block"> 
     <p><span class="text-logo">LoremLOGO</span></p> 
     <p><span class = "tagline">Lorem ipsum dolor sit amet</span></p> 
     </div>  
     <div class="seventy-block block"> 
     <p>test</p> 
     </div> 
    </div> <!-End focus-area --> 
    </div> <!-End header--> 

</div> <!-End wrapper--> 

Это то, что мой CSS выглядит следующим образом:

/*! PocketGrid 1.1.0 
* Copyright 2013 Arnaud Leray 
* MIT License 
*/ 
/* Border-box-sizing */ 
.block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

/* Clearfix */ 
.block-group { 
    *zoom: 1; 
} 
.block-group:before, .block-group:after { 
    display: table; 
    content: ""; 
    line-height: 0; 
} 
.block-group:after { 
    clear: both; 
} 

.block-group { 
    /* ul/li compatibility */ 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 

/* Nested grid */ 
.block-group > .block-group { 
    clear: none; 
    float: left; 
    margin: 0 !important; 
} 

/* Default block */ 
.block { 
    float: left; 
    width: 100%; 
} 

.header{ 
    width: 100%; 
} 

.focus-area { 
    width: 100%; 
} 

.thirty-block { 
    width: 30%; 
    background-color: green; 
} 
.seventy-block { 
    width: 70%; 
    height: 100px; 
    background-color: blue; 
} 

Answer 1

Кажется, вы уже отсортирован его, но только для дальнейшего и будущего помощь любой другой, имеющий аналогичную проблему с этим или медиа-запросами, представляет собой пример, показывающий аналогичную навигацию, с изменением запроса мобильного носителя.

http://jsfiddle.net/vmggcv0g/

Используя следующий запрос, чтобы изменить состояние элемента списка на мобильных телефонах (если экран меньше 480px):

@media only screen and (max-width : 480px) 

вместе со свойством коробчатых размерами, чтобы отступы и границ на элементах списка (с вне этого свойства ширина элемента будет превышать ширину 100%, как это будет включать в себя границу 1px):

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 

Он Re отличная CSS-уловки статья объясняют свойства коробчатых размеров и блочная модель далее:

http://css-tricks.com/box-sizing/

Answer 2

Я игнорируя правила PocketGrid по умолчанию и рассматривать только пользовательский код:

следующих правила непонятно, потому что PocketGrid имеет Mobile First approach, поэтому это поведение по умолчанию.

.header{ 
    width: 100%; 
} 

.focus-area { 
    width: 100%; 
} 

Учитывая, что вы бы 30-70 пропорций только над мобильными точками останова, вы должны включить их в конкретном медиа-запросе, как:

@media only screen and (min-width : 480px) 
{ 
    .thirty-block { 
    width: 30%; 
    background-color: green; 
    } 
    .seventy-block { 
    width: 70%; 
    height: 100px; 
    background-color: blue; 
    } 
} 

На экранах ниже 480px шириной, каждый элемент укладывается, над ним у вас будет 30-70 колод бок о бок