Skin moving and leaving space on mobile devices

[brantics]

Hiya, I'm more a designer than a programmer so don't speak coding in detail.. however I've done a site for a client: http://www.scrapaholics.co.nz which looks fine on desktops but on some mobile devices like tablets it's moving everything to the left and leaving a space at the right with the wood background. I'm not sure why or how to fix it. Obviously people can zoom into the information but on first load it doesn't look great. I'm using the Nota Blue skin and have added a few elements to it and reworked others. The wood was added into the blue specific layout.css sheet:

/* !BLUE */
body {
    background: #FFF url(../../images/blue/woodback.jpg); repeat:repeat-x;
z-index: -1;
background-position:left;
background-attachment: local;
}

as when I tried to do it within the common.css sheet i couldn't get it to work.

Any ideas?

[bsmither]

I'm looking at this. I'll have some ideas shortly.

But first, you MUST get a more reasonable background image. It looks good, yes it does, but at 5.7MiB, and 3000x2000 pixels, this is a seriously bad decision for a web page. Sure, once it is in the browser's cache, no big deal. Still.....

 

In common.css, line 157, you have #session { float:left; width:560px; }. Suggest you remove the float and width properties from this CSS rule, but keep the rule.

Also in common.css, line 463, there is #documents_top { margin-left: 300px; width:1400 px; etc; }. Suggest removing margin-left and width.

[bsmither]

The effect you see with certain things at the bottom is because the <div> block at the bottom of the main.php template has no width, and not contained within a <div> that has a width like #page_wrapper. Thus, with small viewport widths, the text in this <div> centers within the viewport - regardless that the page width is being forced to 1400px wide.

Please be aware that Nota is not a mobile-capable skin. Suggest you install CubeCart's Mobile skin. However, that would be another skin you would need to decorate. (CubeCart switches to a mobile-capable skin automatically.)