Okay Erik - you think you did what I suggested but you did not. I SAID
MAX-WIDTH 960PX AND YOU MADE IT WIDTH=100%. There is a huge difference, and
you have not yet learned this most basic element.
It’s such a beautiful day, I going to go enjoy myself now. Good luck with
your project.
C’mon guys - I got for less these days the yellow card from board-referee (not my first one - so I have to pause one game probably).
Let’s try to clarify a couple of things to successfully things for now and the future:
An inline construction can be separated into 3 parts - and that’s the way my screencasts are structured as well:
PHASE 1 - THE STATIC INFLOW CONSTRUCTION
This is the fundamental start. We define widths using a specific value in pixel. In there, no min or max width matters. Only the heights are “flexible”. On mobile devices, we simply display them (as the absolute positioned pages) scaled down.
PHASE 2 - THE DYNAMIC INFLOW CONSTRUCTION
This is what I call a “pre-stage” of later responsiveness. In there, naturally min and max widths matters to prevent you from “wikipedia-full-width-disease”. Honestly, this pre-stage is important but not of much interest cause without the @media steering-wheel, it isn’t a real page concept having cols that are squished like a worm.
PHASE 3 - LET’S GO RESPONSIVE
Phase 2 + @media queries to change widths and floats of those item, that shall appear different on smaller screens.
If I am correctly oriented, the above page-concept is PHASE 1 - correct me if I’m wrong.
So here are my results:
- NEVER EVER PLEASE
… use the “slice-image” for bg-images. Whatever magic-trick behind - it simply turns that part into a table-construction. PREPARE bg-images if they do not come up to your expectations. In your case it is much easier. Set the image to bottom - tile horizontal and give the parent container (section) the top-green.
- BE CONSEQUENT - CONSTRUCTION RULES, CONTENT LATER
A Box-In-Box Model “à la Thomas” doesn’t know any kind of “absolute” positioning. It does - but not yet, cause we do not need them essentially. So my first thing was to cut out all the “icon-stuff”, placed them on a back-up master and bared the basic construction to the bones.
When I was happy about the appearance of the skeleton on a mobile device, I started to strip them back on their positions. And that’s the current stat:
http://kimmich-dm.de/box-in-box-model/pages/telepuls/
(I’ll send you the artwork back later this day).
FINALLY @all that should know:
Neither I can prove nor I can reproduce it all times, but setting the meta viewport in Freeway is catching thousand flees. Once it works - it is no guarantee that it really does.
I was CONVINCED, that width=device-width is the rule to rock, but on my current (most important responsive client project) I had to even set both to “none” to perfectly work. As I initially built the project on 6.0x I could swear that all was correct, but simply stepping to sixdotone broke this for whatever reason.
No time to venture, but sometimes I think, that a declaration of position:relative as css property (which isn’t really necessary) or even default z-index:0 is causing some kind of troubles.
Boahh - what a post but I hope you got the gist.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options