Centering site and fixed width 4.6.x
 

I need to center my site and fix its width.

Other posts suggest that the css class page-container should be set to:

#page-container {
width: 1024px;
margin: 0 auto;
}

This works except the top header with company logo still fills the whole width of the screen.

Can anyone explain what is going on here? I need the width and centering to apply to the whole page.

Many thanks.

Re: Centering site and fixed width 4.6.x
 

John, first off what skin are you using?

X-cart's header is not really inside the page container. It is positioned absolute, and the html is near the bottom of the page (this is good for SEO, pushes the main content up in Google's eye.

If you can post a link to your page, we can take a look at your CSS and suggest tweaks.

Re: Centering site and fixed width 4.6.x
 

Hi Mike

Thank you for responding.

Here is the site, in the process of being setup (not live):

http://www.thedebugstore.com/x-cart461/

The skin is a customised version of Light & Lucid (3-column).

Re: Centering site and fixed width 4.6.x
 

John,
Take a look at this screenshot: https://www.dropbox.com/s/cwfp2oowx89ylv8/screenie.png -hope that works first time I've ever shared an image that way. It won;t be up forever.

When you override things in Google Chrome, the css works fine. When you are building a site, it is a good idea to turn off the css combining in General settings. helps you understand where you need to edit the file. Turn that off, and we can have a proper look.

Try adding the css that I did in the screenshot, and see if it works.