Skip to main content

Forums

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

Viewing 15 posts - 1 through 15 (of 15 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?

    #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.

    #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.

    #191290

    jknetdesign
    Participant

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

    #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?

    #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.

    #191332

    jknetdesign
    Participant

    Shikkediel – thanks for the script.

    Disregard the white footer issue. I fixed the padding.

    paulob – Thank you for the observation and I will try it. I could use a little more direction on the meta tag. What would I replace?

    #191333

    jknetdesign
    Participant

    I added a class “over” into the About dropddown ul. Is this the right place for the selector? I’ve been trying to gain control via Firebug and can’t seem to get it.

    #191334

    jknetdesign
    Participant

    To try it out I reduced the width on .dropdown li ul a to 235px

    Then I reload in iPhone landscape and there’s still the space on the right.

    #191335

    paulob
    Participant

    Hi,

    The space has gone for me on the ipad and iphone now.

    Perhaps you needed to clear the cache.

    Regarding the IE meta tag then use this one:

    <meta http-equiv="X-UA-Compatible" content="IE=Edge";

    That will make IE use use the latest rendering mode the browser supports and won’t drop into quirks mode or emulate older versions. (It won’t make it emulate a newer version of course).

    #191344

    paulob
    Participant

    the tag above has a typo that was copied though

    Ooops sorry ;)

    #191391

    jknetdesign
    Participant

    Roger that. Issue resolved. I appreciate your help. Thank you

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

You must be logged in to reply to this topic.

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