SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Formatting of page on mobile

    I am trying to get my web page http://gandalf458.co.uk/hangman/play...php?s=losttube to fit better on mobile devices to which end I've added
    HTML Code:
    <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...


    Attached Images Attached Images
    blessed are the cracked for they let in the light

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You can help things along by letting the letters wrap.
    Code:
    #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. #4
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    blessed are the cracked for they let in the light

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by gandalf458 View Post
    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.
    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. #6
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...
    blessed are the cracked for they let in the light

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Try removing the width on #choose and use max-width in pixels instead and test again.

    Code:
    #choose{width:auto;max-width:730px}
    You wil probably need to float the anchors also to allow them to wrap.
    Code:
    #choose{width:auto;max-width:730px}
    #choose a{float:left;}

  8. #8
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...
    blessed are the cracked for they let in the light

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you float the span instead you will also need to adjust the line-height.

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

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...
    blessed are the cracked for they let in the light

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by gandalf458 View Post
    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...
    Oh yes just remove the a from my code. I forgot about that

  12. #12
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ta muchly! G
    blessed are the cracked for they let in the light


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •