Formatting of page on mobile

Mobile
1

[COLOR=#003333][FONT=verdana]I am trying to get my web page http://gandalf458.co.uk/hangman/play-hangman.php?s=losttube to fit better on mobile devices to which end I’ve added

<meta name="viewport" content="width=device-width" />

I attach a photo of how the page looks on my iPhone - although the ‘choose’ <div> takes up the width available, for some reason the <h2> element and the ‘phrase’ <div> wrap roughly where I’ve added the red line.
Thanks for your help…
[/FONT][/COLOR]

2

Hi,

If you are going to use the meta viewport tag then it becomes your job to style the page to fit the smaller device.

You do this by adding media queries to provide a better display for the smaller device which will mean making those wide fixed elements wrap within a 320px viewport. Anything that sticks out will break the layout as it will stretch the screen to fit but your text will still wrap at the smaller width.

If you are not using media queries then you are better off without the viewport meta tag and just let the mobiles scale your page to fit. The best option of course is to use media queries and the meta tag and optimise the site for smaller devices.

3

You can help things along by letting the letters wrap.


#choose {
    display: inline-block;
    margin: 15px 0;
    vertical-align: top;
    width: 53%;
    word-wrap: break-word;
}

Of course there is stil the issue of the 768px google ad so you should look at a responsive ad that will change with viewport size.

4

Thank you Paul. This is just the beginning of my attempt to make the page responsive. I couldn’t - still don’t - understand why one element isn’t wrapping whereas two are.

5

The element that isn’t wrapping (the letters and the fixed width advert) won’t wrap because they can’t. The letters won’t wrap on desktop either unless you apply the fix I gave because at present you have the html crushed together for those letters so that they form an unbroken long word (ABCDEFGHIJKLMNOPQRSTUVWXYZ). That will not wrap anywhere because there is no where for it to wrap unless you break the word.

Therefore the mobile looks at the widest element and scales that to fit in the window even though effectively that element has overflowed outside the container.

Its the same effect you get if you put a 750px width image alongside fluid text and as you close the window the text wraps but the image does not so imagine you carry on closing the window down to 320px. Now at 320px width the text has wrapped nicely but your image is still sticking out of the side of the viewport. The mobile therefore takes that layout and scales it to fit in the viewport resulting in the items that have wrapped being smaller and the items that stuck out now just fit inside the viewport. Effectively you have to ensure that nothing sticks out to avoid this happening.

What you need to do is as I said above and take control once you use the viewport meta tag and then you make sure that those letters wrap and you make sure you don’t have fixed width elements in the page greater than 320px width (approx).

It’s just basic mathematics and if something doesn’t fit in the space available you must adjust it until it does.

6

Thanks for explaining Paul. I have applied your fix and have the wrapping working; only now I get just 3 letters to a line so I’ll have to try some other adjustments as well…

7

Try removing the width on #choose and use max-width in pixels instead and test again.


#choose{width:auto;max-width:730px}

You wil probably need to float the anchors also to allow them to wrap.


#choose{width:auto;max-width:730px}
#choose a{float:left;}
8

Thanks Paul. I think it may be the spans that need to be floated as the letters no longer have an anchor after they are chosen. I’ll have to try that later…

9

If you float the span instead you will also need to adjust the line-height.


#choose a span {
    background-color: #FFF1D7;
    color: #663366;
    float: left;
    line-height: 1.2;
    text-decoration: none;
}
10

Thanks once again Paul. I shall also need to look at #choose span (without the anchor) since there is no anchor on a letter once it has been “used”. Ain’t it always the case that something you start for a bit of fun takes on a life of its own…

11

Oh yes just remove the a from my code. I forgot about that :slight_smile:

12

Ta muchly! G :slight_smile:

13