Newbie- Adjust Page Width

[stslivealoha]

Aloha-

I searched but could not find a definitive solution. I am Using the Gradient template. Would like all pages to have a fixed width. It appears that the page width is set to 100% of browser, thus alignment, especially the index page is way off when viewing with a wide-screen monitor.

http://bigmanhawaii.com

Is there an easy way to handle this while still utilizing the built in template? I am a novice with regards to HTML but understand the basics.

Mahalo for taking the time read this and hopefully find me a solution.

[Jim]

What size of browser are you designing your site for? The Image you have at the top of your page is 900 pixels wide. Add to that 100 or so each for the left and right navigation and you are over 1100 pixels wide, wider than a great may users screens. I would should for a browser window less than 1024 pixels wide. Even though people may have larger screens that doesn't mean that they have their browser opened up to take up the whole screen.

You can find more information about the gradient theme that you are using at http://www.shopsite.com/templates/cookb ... ient.shtml If you can't find the info you need there you might try setting the page width on Pages > Edit Page Layout and see if that affects it.

[stslivealoha]

Mahalo (thank you) for your reply. Yes, i agree with you that people have different screens and set at different resolutions that would impact the viewing of the website.

I just want the page to be limited to a set size so if and when it encounters a browser with a screen set@ a high resolution it will not expand, thus throwing off how the page was designed to be viewed.

I did try earlier adjusting the edit page layout and using (from the research i did) the default settings of 100%, 75%, etc. I did not see any difference whatsoever. I tried to go through the gradient1.css file but i am not sure if this is where i can set the page width.

Again, i appreciate you taking the time to read and respond!

[Jim]

in the include file gradient1-pa-vars.sst it has this code which sets the page width

Code: Select all

#<!-- Page Width # -->
  [-- IF PAGE.PageWidth "90%" --]
    [-- VAR.pa_width "90%" --]
  [-- ELSE_IF PAGE.PageWidth "85%" --]
    [-- VAR.pa_width "85%" --]
  [-- ELSE_IF PAGE.PageWidth "75%" --]
    [-- VAR.pa_width "75%" --]
  [-- ELSE_IF PAGE.PageWidth "65%" --]
    [-- VAR.pa_width "65%" --]
  [-- ELSE_IF PAGE.PageWidth "50%" --]
    [-- VAR.pa_width "50%" --]
  [-- ELSE --]
    [-- VAR.pa_width "90%" --]
  [-- END_IF --]



and in the gradient1.css file it has this code

Code: Select all

 body{
  font-family: [-- IF STORE.Font --][-- STORE.Font --][-- ELSE --]Arial, Helvetica, sans-serif[-- END_IF --];
  font-size: [-- IF STORE.FontSize --][-- STORE.FontSize --][-- ELSE --]76%[-- END_IF --];
  color: [-- VAR.text_color --];
  background-color: [-- VAR.background_color --];
  line-height: 1.166;
  margin: 0px;
  padding: 0px;
  min-width: 777px;
  width: [-- VAR.pa_width --];
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  display: table;
  }


So from the second section of code the minimum width of the page is set to 777px. The actual maximum width is set by the width: [-- VAR.pa_width --] and that var is set in the first section of code to 90, 85, 75, 65, 50 based on the setting in the Pages > Edit Page Layout > Width field. If the value is something other than one of those set % the width will be set at 90% of the browser window width.

So the width will be a minimum of 777 pixels and if the window is wider than that it will expand to take up the % of the window that is indicated.

[stslivealoha]

Mahalo (thank you) for your explanation!

So i have been playing with the edit page layout for the index.html page and at 75% the text no longer expands and at least the body portion remains fixed. So thank you.

You made a reference to the minimum size of the page width, is that adjustable? and would it impact just that page or across the site (all pages?)

Again, I appreciate your help! and i hope this has enlightened others who may have had a similar question!

[Jim]

As you can see in the code I copied from gradient1.css the "min-width: 777px;" is defined as 777 px. I suppose that you could change that if you want but I don't know what all is relying on it.

I don't know which template files use thie gradient1.css styles. But any that do use it will have that min-width of 777px. You would have to look at the source of the various gradient templates to see which ones use it. Or you could make a copy of that file in the merchant area (Merchandising > Custom Templates > Includes > Copy ShopSite include) and make a modification to the min-width and see what parts of your store change. It could affect store pages, moreinfo pages, gift certificates, search, registration, shopping cart etc.
Once you have made a copy of the template edit it and make the change then use the Copy option to make another copy and give it the original ShopSite name, gradient1.css