Problem with grid in landscape mode on a smartphone

[Adam77777]

Using Respond.js media queries, I split the top line for the "Smartphone version" in the css file as shown bellow. My issue:

The problem is "top-nav-block" and it's contents become smaller than the surrounding blocks when viewed in landscape orientation on an iPhone 4. Everything is ok in portrait orientation. "Logo block" is on the left, and "top-nav block" is on the right hand side of the top row when viewed on a mobile:

Pocketgrid example viewed here: http://adamrainerphotography.com.au/

index.html file

<div class="block-group">
  <div class="logo block"><div class="box">Logo</div></div>
  <div class="top-nav block"><div class="box">TN</div></div>
  <div class="main block"><div class="box">Main</div></div>
  <div class="right-nav block"><div class="box">Right Nav</div></div>
  <div class="footer block"><div class="box">Footer</div></div>
</div>

basic-layout-responsive.css file

/* Smartphone version */
@media (min-width: 0px) {
.logo { width: 80%; }
.top-nav { width: 20%; }
.main { width: 100%; }
.right-nav { width: 100%; }
.footer { width: 100% }

/* Computer version */
@media (min-width: 768px) {
.logo { width: 20%; }
.top-nav { width: 80%; }
.main { width: 80%; }
.right-nav { width: 20%; }
.footer { width: 100% }
}

.............................................................................................

I just noticed that one of your examples has the identical problem when in landscape on the iPhone:

http://arnaudleray.github.io/pocketgrid/examples/nested-grids-responsive.html

The text is shrunk in the "Nav block".

[arnaudleray]

Hi Adam,

I don't see your problem on my Android phone.
Maybe you refer to the famous subpixel rounding problem, common to most grid systems.
You could try putting a "float: right" on the "top-nav" block.

Does it solve your problem?

[Adam77777]

... not sure ... I've moved on to a basic stack when on the iPhone. I'm closing this issue.

Thanks for this great little grid!