Center non responsive wrapper on devices

[jknetdesign]

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/

[shaneisme]

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?

[shaneisme]

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.

[jknetdesign]

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

[shaneisme]

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

[jknetdesign]

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

[jknetdesign]

Should I install jQuery 1.7 ?

[jknetdesign]

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

[paulob]

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.

[jknetdesign]

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?

[jknetdesign]

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.

[jknetdesign]

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.

[paulob]

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

[paulob]

the tag above has a typo that was copied though

Ooops sorry ;)

[jknetdesign]

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

[Author]

Posts