[Pro] Help me please!

Hi there,

Have some troubles with scaling on iPad.

The site I’m talking about works as it should on normal screens except mobile device!
Then the back ground isn’t full width

Made it flexible with inline Box but can’t figure out what goes wrong here

Already checked the setting in the Mobile section and set them to Width = Device Width

I realy hope somebody can help me with it.

Thx

Erik

http://www.telepuls.nl

http://www.telepuls.nl


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Erik,

A quick look at your HTML tells me your problems are fixed widths when you
need max-widths, absolute positions when you probably need relative
positions, and right position for your social tabs instead of left. Too
many things to list and not enough time for me to go through it all.

Best of luck,


Ernie Simpson

On Sun, Sep 8, 2013 at 10:43 AM, Erik email@hidden wrote:

Hi there,

Have some troubles with scaling on iPad.

The site I’m talking about works as it should on normal screens except
mobile device!
Then the back ground isn’t full width

Made it flexible with inline Box but can’t figure out what goes wrong here

Already checked the setting in the Mobile section and set them to Width =
Device Width

I realy hope somebody can help me with it.

Thx

Erik

http://www.telepuls.nl

http://www.telepuls.nl


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think (as Ernie already pointed out), that the absolute positioned items are the problem (and there are lots of them).

The problem is, that they are declared “absolute” from top and left.

Just as un example:

The “id=adresgegevens” has a left property of 802px.

This is displaying that specific DIV out of the float way too right and causing sidescroll.

Solution:

Review your construction and set them as well relative (Box-in-Box) to the parent-divs. Absolute positioned in a Box-in-Box Model is possible, but the top/left declaring requires percentage values to play nice in devices.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Thomas,

Thx for your respons.
With your sugestions in mind, I start to build a new master,
but without anything then backgrounds on this page it already goes wrong (on ipad)

Link:
http://www.telepuls.nl/Nieuwsbrieven/test.html

So it looks there is more wrong than only the absolute positioned items ???

You have any idea?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

When you set an item with a fixed width, it will always stay that wide even
though the iPad is narrower. The solution is to use max-width instead -

These are the items which you must set to max-width, not fixed -

  1. Content
  2. Content1
  3. Content2
  4. Content3

Thomas can explain more. I’m recovering from oral surgery and the pain meds
make it hard to focus :sunglasses:


Ernie Simpson

On Sun, Sep 8, 2013 at 4:03 PM, Erik email@hidden wrote:

Hi Thomas,

Thx for your respons.
With your sugestions in mind, I start to build a new master,
but without anything then backgrounds on this page it already goes wrong
(on ipad)

Link:
http://www.telepuls.nl/Nieuwsbrieven/test.html

So it looks there is more wrong than only the absolute positioned items ???

You have any idea?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

thx Ernie!

That looks better!

Wish you strenght, get healty soon!

Erik


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oke, but now with the items set to max-width as you said, the alignment of this content isn’t centered anymore?

Setting is centered?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thomas,

For the four footer parts, I made a wrapper and put everything in the wrapper? So far so good?

Then, the positioning with the percentage is something were you lost me? Do I have to set the wrapper to a certain percentage or the four parts?

Thank you guys for your help


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Erik,

sorry - had been late last night.

Forget about the percentage positioning (that wasn’t a well thought post).

The point is, that those boxes need to be placed as “in-click insert” relative positioned. If you keep those items absolute, they are taken “out of the flow” of the page.

My thumb of rule is simple:

Once Inline - ever inline

… and you are pretty far to do a complete Box-IN-Box Model which I recommend here to avoid any “misplaced” items.

I even wonder if RPL action could do its job here. Make sure that the absolute positioned items don’t overlap (But this is a vague shot to the moon - honestly).

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Thomas,

See testpage:
http://www.telepuls.nl/Nieuwsbrieven/test.html

a few things
On advice of Ernie I changed the items below from fixed to to max-width. but now de center alignment doesn’t work anymore, do you have a solution for that?

1.Content
2.Content1
3.Content2
4.Content3

And the other is the Box- inBox -in Box solution
I’m not sure if I did it wright at the test page, can you have a look at the footer content. Made a inline wrapper an placed the content in the wrapper, is that what you mean?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

As far as I can see, the content(s) have NO (max)-width property declared.

The thing with the footer boxes:

You can wrap the wrap and repeat it how often you want.

The 4-cols need to be insert “relative” so copy the first col, double-click into your wrapper and paste it in there. Repeat this for your other 3 columns.

You should probably know, that I run a commercial screencast series on exactly this topic which I herby recommend to have a look on.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You’re still not following through with many things - relative vs absolute
positioning, Max-widths vs fixed widths, etc. This really is easier and
more bulletproof if you just make it an inline (in-flow, box-model) design.

You will save yourself so much grief and frustration by subscribing to
Thomas’ screencasts for making inline (or inflow, or box-model) layouts.

Screencasts - http://www.kimmich-dm.de/screencasts.php

My newly updated inline template, for users to deconstruct the processes
involved - thebigerns.com

Best luck

Ernie Simpson

On Sun, Sep 8, 2013 at 4:44 PM, Erik email@hidden wrote:

Oke, but now with the items set to max-width as you said, the alignment of
this content isn’t centered anymore?

Setting is centered?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thx Ernie and Thomas,

As I said in the other thread

Placed the old stuff back and first going to find some time to watch Thomas screencasts :slight_smile:

a lot to learn

Erik


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options