Site not centered

**Cloud** · 13 March 2013, 03:39 PM

Hi

I am creating a site in webdesigner mx and for some reason on an android phone it is aligned to the left, is there a way to center it, can't think why it is doing that as all my sites with webdesigner 6 are all centered.

The site is no where complete but can be found at http://sketchprinting.com/sketch/xpressbanners/

thanks in advance.

**jamesd** · 13 March 2013, 05:34 PM

Hi Skech, its aligned center here on my Galaxy s2 :-)

**Cloud** · 13 March 2013, 07:34 PM

Can you see that there is a grey vertical bar down the right hand side, I have tried it on a samsung ace 2 and a galaxy note and the bar is there on both, the bar is the background on the site, so if you view it on a desktop you will see the light grey background. I am not at the office so cannot check on the set-up we have for checking on lots of mobile devices.

**jamesd** · 13 March 2013, 08:05 PM

I can see it when I scroll but it is not visable when it first loads. Is there a page shadow? I had a similar problem when making a mobile template, removing the shadow fixed it :-)

**Cloud** · 13 March 2013, 08:39 PM

No James, there's no shadow, that is what I thought at first. Will try and see if it might be something else.

**steve.ledger** · 13 March 2013, 08:41 PM

Loads perfectly fine and centred on my Galaxy S2 using Chrome, Dolphin or Opera.
No grey bars.

**Cloud** · 13 March 2013, 08:52 PM

We have a galaxy s3 and iphone etc at the office so I will check then. Thanks James and Steve for checking for me.

**Egg Bramhill** · 13 March 2013, 09:37 PM

Tested it on my HTC Firewire and it indeed does have a grey bar on the right hand edge.

**StevenWWinters** · 13 March 2013, 10:49 PM

I see the grey background on the right hand side in both Chrome and Safari on iPad 3 and iPhone 5.

Was the HTML generated by XWD? The body tag looks like this below when inspected with Firefox (Inspect Element using Developer Tools, not View Code):

HTML Code:

<body id="ecwid_body" class="ecwid-lang-en" style="background-color: rgb(204, 204, 204); min-height: 735px; background-position: 114.5px 0px;">

The 204, 204, 204 is the same gray showing so I assume this is the tag causing it. I'm not sure why there is a background-position 114.5px 0px css defined when I don't think your using a background image. Without further testing, I can't say that it is causing the problem, but what I would do is save the HTML to a test location with out the background-position and see if it views differently in your mobile device.

On closer look, I'm guessing your page is loading CSS from this site (http://www.ecwid.com/ ) that may be throwing things off. I haven't dug deep enough into it, but if you remove the external script and CSS references and the problem clears, you can isolate the problem.

This reference maybe caused by the associated script file.:

HTML Code:

<link rel="stylesheet" href="http://app.ecwid.com/css?ownerid=1530145&h=-1164973116&lang=en&id-selector=html%23ecwid_html%20body%23ecwid_body"></link>

Source script:

HTML Code:

<script type="text/javascript" src="http://app.ecwid.com/script.js?1530145"></script>

Hope this helps...

**Cloud** · 14 March 2013, 09:22 AM

Tested it without the ecwid code and it seems that the code is the problem. The code has to stay so the client will have to live with it, it is only on some phones anyway and is not that much of a big deal, I'm probably being a bit pedantic. Thanks to everyone who has checked this for me and a special thanks to Steven for the heads up on the ecwid code.