| ||||||||||
Shopping cart software Solutions for online shops and malls | ||||||||||
|
X-Cart Home | FAQ | Forum rules | Calendar | User manuals | Login |
Auto Resize for Different Screen Resolutions | |||
|
|
Thread Tools | Search this Thread |
#1
|
|||||||
|
|||||||
Auto Resize for Different Screen Resolutions
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.
__________________
4.4.5 Gold |
|||||||
#2
|
|||||||||
|
|||||||||
Re: Auto Resize for Different Screen Resolutions
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
__________________
Steve Stoyanov CFLSystems.com Web Development |
|||||||||
#3
|
|||||||||
|
|||||||||
Re: Auto Resize for Different Screen Resolutions
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.
__________________
Mike White - Now Accepting new clients and projects! Work with the best, get a US based development team for just $125 an hour. Call 1-502-773-6454, email mike at babymonkeystudios.com, or skype b8bym0nkey XcartGuru X-cart Tutorials | X-cart 5 Tutorials Check out the responsive template for X-cart. |
|||||||||
#4
|
|||||||
|
|||||||
Re: Auto Resize for Different Screen Resolutions
Thank you both for your suggestions. It is greatly appreciated. I will work on reducing the size of the logo.
__________________
4.4.5 Gold |
|||||||
#5
|
|||||||
|
|||||||
Re: Auto Resize for Different Screen Resolutions
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.
__________________
4.4.5 Gold |
|||||||
#6
|
|||||||||
|
|||||||||
Re: Auto Resize for Different Screen Resolutions
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
__________________
Mike White - Now Accepting new clients and projects! Work with the best, get a US based development team for just $125 an hour. Call 1-502-773-6454, email mike at babymonkeystudios.com, or skype b8bym0nkey XcartGuru X-cart Tutorials | X-cart 5 Tutorials Check out the responsive template for X-cart. |
|||||||||
#7
|
|||||||
|
|||||||
Re: Auto Resize for Different Screen Resolutions
Thanks Mike. That did the trick!
__________________
4.4.5 Gold |
|||||||
|
|||
X-Cart forums © 2001-2020
|