Page Width change automatic for screen size ?

How can I make my site, the page width, the boxes or etc variable to the screen size of each viewer.

My site is https://www.radiomeal.com

If I switch to lets say 1024 X 768 pixel screen size, the main page width will not neatly aligned like those displayed in Privacy Notice.

If I switch to a finer pixel size (for example 1280 X 860), it will be OK.

I wonder how will people look at my site and claim it 'not appealing'.

Thanks in advance.

I think you're asking about making your site flexible? So that it adjusts to whatever width the visitor's browser can handle?

That's not possible with the stock Zen templates. There are a pile of things that would have to be changed in the stylesheet and the code to make that work. But the good news is that others have already figured this out.

I can't recall which template it is at the moment, but in the Downloads section, under templates, you'll find at least one template that is made to be flexible like that. Set up your site with that template and modify it for your appearance and I think you'll have what you're looking for.

Just found one: the last one in the list, ZenCart Zen template. I haven't tried it but the description says it's "designed for a full width display or fluid 100% width."

HTH

Rob

Thanks for the information Rob.

It's just that I have already modified the stock template as what you can see in my site. Probably it's just too time and energy consuming to start from scratch again.

Anyway, I will give that template you mentioned a look and see if it can be tweaked similar to my layout. Its going to be a loooong day today.

Any other ideas ?

OK I downloaded the ZenCart Zen template and FTP'ed into my ZC Install folder. Guess what, the template never appear in my Admin > Tools > Template Selection!

I am sure I had copied the files (few times to make sure) in its intended structure but still n/a. Now I got a new predicament sigh.

maza:

OK I downloaded the ZenCart Zen template and FTP'ed into my ZC Install folder. Guess what, the template never appear in my Admin > Tools > Template Selection!

I am sure I had copied the files (few times to make sure) in its intended structure but still n/a. Now I got a new predicament sigh.

You should be able to just unzip the contribution and upload the entire includes folder to your server.

Then in admin -> tools -> template selection you should see ZenCart Zen as a selection.

Clyde,

Hey, I wonder what was my mistake. I got it working now.

Thanks for the help.

Hey Maza, i looked at your website and its so wide I can't see the whole thing at once. if you are looking to make it adjust automatically to the window, do the following,

1. find which "stylesheet.css" you are using, it could be in (/includes/templates/classic/css) and find the following code,

/wrappers - page or section containers/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 750px;
vertical-align: top;
border: 1px solid #9a9a9a;
}

2. change the "750px" to the word "auto", make sure you remove the letters "px". this is what it should look like,

/wrappers - page or section containers/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: auto;
vertical-align: top;
border: 1px solid #9a9a9a;
}

here is my page as an example,

http://gtc-music1.com/store/

Thanks gtcman,

It's just that if I view the page in 1024 x 768, the main page will still kick the right sidebox out of its way. How do I make the centre area (where the Login greeting message sits) variable?

I want it to be nicely placed in the middle where both sideboxes are located and aligned with my site logo.

Thanks.

gtcman:

Hey Maza, i looked at your website and its so wide I can't see the whole thing at once. if you are looking to make it adjust automatically to the window, do the following,

1. find which "stylesheet.css" you are using, it could be in (/includes/templates/classic/css) and find the following code,

/wrappers - page or section containers/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 750px;
vertical-align: top;
border: 1px solid #9a9a9a;
}

2. change the "750px" to the word "auto", make sure you remove the letters "px". this is what it should look like,

/wrappers - page or section containers/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: auto;
vertical-align: top;
border: 1px solid #9a9a9a;
}

here is my page as an example,

http://gtc-music1.com/store/

Thanks your fix works great. :clap: I still have a little of the side things. How did u take them out?

Dave