X-Cart forums

[bf2017]

Hi everyone.

So I am somewhat new to X-Cart and have little CSS experience. I am using the Violet Dreams skin and have changed the logo.

My question is:

I like that my logo is centered. However what I would like to do is to have the CSS automatically resize the header (logo) for different screen resolutions and mobile while keeping the logo centered. Right now it looks fine with my resolution of 1680x1050. However if I drop my resolution or use mobile, then the page go way out to the right and does not resize. Knowing only a little CSS I hard-coded the logo size to a width of 1652 which I'm sure is why it goes way to the right at lower resolutions, but I don't know how to have the CSS automatically resize it.

Here is the site:

http://www.inkedboutique.com/home.php?shopkey=123

I am using 4.4.4 Gold
I am viewing it with Firefox and have Firebug.

Thanks in advance for any help.

[cflsystems]

First you really need to change the logo size, the actual image size. You can't expect css to resize image. There are some ways to read screen resolution and but will involve using js, then loading different image based on that. As for centerring the image use this instaed of the class you have right now

#header .logo {
height: 220px;
margin: 0 auto;
width: 1520px;


}

Of course hopefully you will change the image width to somethign like 200-250px, 1520px is just not going to work no matter what you do

[totaltec]

What you can do to fix this flamboyant design (I like it), is to fix the logo to the left. Then seperate the IB and fix it's position on the right. In between you can have a backround fill color. It will take some clever slicing to get perfect.

You should also consider Steve's advice, and try to reduce the overall size somewhat. Your finished site should look good at 975 px wide.

[bf2017]

Thank you both for your suggestions. It is greatly appreciated. I will work on reducing the size of the logo.

[bf2017]

What I did is changed the page to a fixed width. My question now is how do I change the left and right color to black? Right now it is white.

[totaltec]

Fixed width is the way to go.

body { background-color: #FFFFFF; /* change this color */
border: 0 none;
height: 100%;

Look in your main.css or altskin.css depending on what skin you are using.
Change the FFFFFF to 000000.
Hope that helps,
-Mike

[bf2017]

Thanks Mike. That did the trick!