css3 - CSS: divs not stacking -

css3 - CSS: divs not stacking -

i using pocketgrid create website responsive.

the way pocketgrid works "thirty-block" class should stack on top of "seventy-block" class, when cut down size of browser of mobile device. isn't happening. going wrong?

this html looks like:

<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 down amet</span></p> </div> <div class="seventy-block block"> <p>test</p> </div> </div> <!-end focus-area --> </div> <!-end header--> </div> <!-end wrapper-->

this css looks like:

/*! 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; }

it seems you've sorted farther , future help else having similar issue or media queries here's illustration showing similar navigation, mobile media query change.

http://jsfiddle.net/vmggcv0g/

using next query alter list item state on mobiles (when screen less 480px):

@media screen , (max-width : 480px)

along box-sizing property allow padding , borders on list items (with out property item width exceed 100% width include 1px border):

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

here's great css-tricks article explaining box-sizing property , css box model further:

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

css css3 pocketgrid