X-Cart forums - How to Adjust for Different Screen Sizes

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - How to Adjust for Different Screen Sizes (https://forum.x-cart.com/showthread.php?t=18744)

How to Adjust for Different Screen Sizes

I have searched for How to Adjust for Different Screen Sizes, but I cannot find the resolution code or where I can purchase a mod to do so.

Our web site looks good at 800x600, but really bad at 1024x768, etc.

We would like our site to re-adjust for the screen resolution of a viewer's display setting whether it be 800x600, 1024x768, 1280x768, etc.

Any help here would be greatly appreciated.

Darr

web site: http://crateart.com/home.php

Whats wrong with it at 1024x768 ??? it looks perfectly fine to me.
Are you wanting to make it full screen width? fixed screen width sites are much better in my opinion when desigining.

cotc2001: We would like the site to fill the entire screen on display. The site was designed for viewing at 800x600, but according to our marketing tracks, more people are viewing at 1024x768 than 800x600.

I have to agree, your site works well at bigger resolutions, mainly because the blue border frames it and makes it ok. You are right though, more people are using bigger resolutions these days.

If you look at your skin1/customer/home.tpl you will see that you can alter table widths to 100% which will stretch out your page to full width on all browsers. Also look at your skin1/head.tpl. If you are adept with html tables, you can make sliding tables for your head to keep the right hand side right aligned, and make the middle section stretch.

Rectangle_top.tpl has a table cell that controls the overall width of the site. It is set to 100% by default.

Here is our rectangle_top.tpl code:

Code:

{* $Id: rectangle_top.tpl,v 1.13.2.7 2005/09/06 11:07:44 max Exp $ *}

{ include file="common_js.tpl"}

{if $config.Adaptives.isJS eq '' && $config.Adaptives.is_first_start eq 'Y'}

{if $main eq "catalog" and $current_category.category eq ""}

<SCRIPT id="adaptives_script" type="text/javascript" language="JavaScript 1.2"></SCRIPT>

<SCRIPT type="text/javascript" language="JavaScript 1.2">

if (document.getElementById('adaptives_script'))

    document.getElementById('adaptives_script').src = "{$current_location}/adaptive.php?send_browser="+(localIsDOM?"Y":"N")+(localIsStrict?"Y":"N")+(localIsJava?"Y":"N")+"|"+localBrowser+"|"+localVersion+"|"+localPlatform+"|"+(localIsCookie?"Y":"N")+"|"+screen.width+"|"+screen.height+"|{$usertype}";

</SCRIPT>

{/if}

{/if}

<TABLE class="okvir" align="center" border="0" height="100%" cellpadding="0" cellspacing="0">

  <TR>    <TD valign="top"><DIV style="position: absolute;" id="div_null"></DIV>

Does anyone know what : TABLE class="okvir" means? I cannot see where the width for 100% is.

That is not the standard rectangle_top.tpl, it appears to have been altered. Here's the un-edited version from 4.0.17:

Code:

{* $Id: rectangle_top.tpl,v 1.13.2.7 2005/09/06 11:07:44 max Exp $ *}

{ include file="common_js.tpl"}

{if $config.Adaptives.isJS eq '' && $config.Adaptives.is_first_start eq 'Y'}

<SCRIPT id="adaptives_script" type="text/javascript" language="JavaScript 1.2"></SCRIPT>

<SCRIPT type="text/javascript" language="JavaScript 1.2">

if (document.getElementById('adaptives_script'))

    document.getElementById('adaptives_script').src = "{$current_location}/adaptive.php?send_browser="+(localIsDOM?"Y":"N")+(localIsStrict?"Y":"N")+(localIsJava?"Y":"N")+"|"+localBrowser+"|"+localVersion+"|"+localPlatform+"|"+(localIsCookie?"Y":"N")+"|"+screen.width+"|"+screen.height+"|{$usertype}";

</SCRIPT>

{/if}

<TABLE align="center" border="0" cellpadding="0" cellspacing="0" width="{$width|default:"100%"}" height="100%">

  <TR>

    <TD valign="top"><DIV style="position: absolute;" id="div_null"></DIV>

Thank you, issue has been resolved!

Thank you to everyone that contributed to this post. This issue has been resolved thanks to the free advise from the X-Cart Support Desk. All I had to do was to locate "okvir" on the style.css file and change it from "width: 780px" to "width: 100%".
Too easy! :D

Hmmm I wish I had seen this site earlier - would have been some perfect Christmas presents for my sister... :(

TelaFirma: Next year visit us for gifts for your sister!
We discount up to 15% off starting mid November for holiday gift giving.
Happy Holidays!
Darr :D