Padding problem with Unsemantic & Opera-Mini

[illplanet]

I'm having trouble getting the unsemantic-grid-responsive.css to work properly with the Opera-Mini browser. On just any other mobile browser I could get my hands on it works fine. However on Opera-Mini, the right padding to the border of the screen is missing. The floats seem to be correct, but I don't have 10px padding on the right. Not sure what the reason is, even Opera-Mobile works fine. Heard of some viewport issues with O-Mini and tried to add @media screen and (max-width: 400px) { @-o-viewport { width: device-width; } } but without any success.

You can reproduce this issue with your site unsemantic.com as well when you open it in Opera-Mini.

[nathansmith]

Can you take a screenshot of it?

Also, is this happening on the Unsemantic.com site itself?

[illplanet]

Hi Nathan, yes, it's happening on the Unsemantic.com site too.

[nathansmith]

Okay, can you get me a screenshot so that I can better understand?

Also, is this on iOS and/or Android?

[illplanet]

I have this problem on a Android device (HTC Desire HD, Android 2.3.5), no iOS device at hand. Here's the screeenshot.

[nathansmith]

Ah, Opera Mini is the browser that executes all code server-side before sending down a static rendering, right?

I'm not sure there's anything that can be done about this.

Does Opera Mobile — which live parses HTML/CSS/JS the way all other browsers do — have the same problem?

[illplanet]

Opera Mobile works like a charm. I'm not sure how the Mini works, I just read it's used on many mobile devices due to it's speed.

[nathansmith]

Yeah, it's speed is based on how it caches a server-side rendering of what it thinks a web page out to look like.

It doesn't even handle unobtrusive click events. If you hard-code…

<a onclick="…">Text</a>

It does a full page refresh, so the server can interpret what the result of that click should be.

Anyway, I don't think there's anything that I can do from an HTML/CSS standpoint, since their rendering engine is on the server.

[illplanet]

Yeah, think you're right: "In Opera Mini, the Opera Presto browser engine is located on a server. In Opera Mobile, it is installed on your phone" (http://my.opera.com/mobile/blog/2009/12/03/difference-between-opera-mini-5-and-opera-mobile-10). But how does it come that other responive frameworks (e.g. Foundation, Twitter Bootstrap) don't seem to suffer from it? Please don't get me wrong, I really like your Framework as it comes with some handy features that these others lack of. Here are two comparing screenshots:

[nathansmith]

I'll have to look into it. I'm not sure what's up with Opera Mini.

[illplanet]

Thank you!

[illplanet]

Hi Nathan, seems like I found a solution for the problem: I changed the min-width for the body from 320px to 280px (line 74) - this seems to do the trick. (Edit: a min-width of 300px for the body works too).

[illplanet]

This find actually made me wonder if the min-width command is really necessary. I commented it out and everything works like it should. What do you think? What was your intention behind it?

[nathansmith]

You're right, min-width isn't actually needed.

That was my initial attempt to fix IE10 in Windows 8's "snap mode," but I've already handled that here instead…

https://github.com/nathansmith/unsemantic/blob/master/assets/sass/partials/_unsemantic-ie-snap.sass

So, that min-width was a remnant that didn't need to be there. I removed it in this commit…

https://github.com/nathansmith/unsemantic/commit/a2964c98e981ec3b7f0709d5ad45fd91c7b842b7

Thanks!

:)