Skip to main content

Forums

This topic contains 21 replies, has 5 voices, and was last updated by  jknetdesign 4 years, 8 months ago.

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #191266

    jknetdesign
    Participant

    Full mobile responsiveness is not necessary, but how can I get this to display centered horizontally on iPad and iPhone?

    Yes I’ve tried inspector myself before posting this question.

    http://extraordinarygolf.com/

    #191280

    shaneisme
    Participant

    I think if you just remove this line:

    <meta name="viewport" content="width=device-width, initial-scale=auto">

    Modern devices will assume it should be zoomed out and I know Safari will center it when that happens. Of course it’s basically unusable…

    So if “full mobile responsiveness” isn’t necessary, why do you care what it looks like on an iPad and iPhone?

    #191282

    jknetdesign
    Participant

    This reply has been reported for inappropriate content.

    Now the site fits within iPhone portrait, but is not centered on landscape or iPad. It’s aligned left.

    Because the client is pointing out a space on the right and just wants it centered.

    #191283

    shaneisme
    Participant

    You might be able to find a JS solution for this, but it’s a bad idea and non-starter.

    Sorry I don’t have anything else to help with, but I’m in the camp that if the client doesn’t want to pay for a modern website these things will happen.

    #191284

    Shikkediel
    Participant

    This reply has been reported for inappropriate content.

    This will center on screen on page load and resize whenever it is smaller than the content :

    http://tinyurl.com/center-on-small-screen-pen

    You could change the width (and maybe leave out the resizing).

    #191286

    jknetdesign
    Participant

    I placed jQuery in the header and it’s still aligned left. Am I doing something wrong here?

    #191287

    shaneisme
    Participant

    Yes, you’re calling for jQuery before it’s loaded. It needs to go after.

    #191289

    Shikkediel
    Participant

    This reply has been reported for inappropriate content.

    Added a tweak – apparently there’s no need to use ‘html, body’ for a horizontal scroll as all browsers seem to respond to ‘document’ as well.

    #191290

    jknetdesign
    Participant

    Unfortunately no improvement. It just added a white space below the footer.

    #191306

    Shikkediel
    Participant

    This reply has been reported for inappropriate content.

    I now see it’s also a rather old version of the library – 1.5.
    The .on method won’t work with that (needs at least 1.7)…

    #191319

    jknetdesign
    Participant

    Should I install jQuery 1.7 ?

    #191320

    jknetdesign
    Participant

    Also, do you know where the white strip in the footer is coming from?

    #191325

    __
    Participant

    This reply has been reported for inappropriate content.

    Should I install jQuery 1.7 ?

    No. The current release of jQuery is 2.1.3 (or 1.11.2, if you still support IE8-).

    #191328

    Shikkediel
    Participant

    This reply has been reported for inappropriate content.

    I agree, best to go with the latest version.
    Not too many methods since 1.5 have been deprecated altogether :

    http://api.jquery.com/category/deprecated/

    Can’t say I see a white stripe anywhere.

    #191329

    paulob
    Participant

    Hi,

    The problem is caused by your dropdown navigation which for the ‘about’ menu items sticks out of the layout to the right by a hundred pixels or so.

    As you do not have a responsive site or a meta tag to control the site the device will work out the width of the site that it needs to display in its viewport and this will include all parts that overflow such as your dropdown menu. The space you see at the right is the room for the dropdown menu to fit into the screen.

    If you make sure that nothing sticks outside of your 1000px layout then the page will get zoomed to fit on the smaller device.

    You could do this by setting that last menu item to display at right:0 so that it doesn’t go outside your layout.

    e.g.

    .dropdown ul {
    position:absolute;
    display:none;
    right:0!important;
    left:auto!important;
    }

    You would also need to add a special class to that ‘about’ item and merge it into the code above (and to avoid using !important as I did just find the right specificity).

    Also I notice you are using the ie7 meta tag which will make all good versions of IE (including ie11) render like the worst version of IE. Unless you have a very good reason for doing this then you should be using the ‘edge’ meta tag value and not the ’emulate ie7′ value.

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star