Auto Width

I am new to web page design. I notice when you go to www.apple.com, the screen width adjusts for different screens. For example ipad, iphone, desktop. The web page I designed extend beyond the screen for ipads and smaller monitors. I know there is an auto width tweak, but I'm not sure how to use it. Does anyone know of a video to show how it works or have any other suggestions.

Not possible with Xara Web Designer. It's a WYSIWYG designer, there is no facility to create fluid layouts or responsive design pages.
The auto width tweak requires you create several versions of your site at different widths to accommodate the platforms you desire.

Code:

---

<script type="text/javascript">//<!--
// This snippet automatically loads the best
// matching variant of the page for the window width.
// ... see the code below for settings ...
var my_wps_w=parseInt(xr_xri.style.width); var my_wps_n='';
function my_option(name, width){if(width!=my_wps_w)
{if((document.documentElement.clientWidth<my_wps_w && width<my_wps_w)||(document.documentElement.clientWidth>=width && width>my_wps_w))
{my_wps_w=width;my_wps_n=name;};};};

/*********************************************************/
// If you have created multiple variants of the
// same page that have different widths,
// list them all here (including this page),
// then copy&paste this placeholder to all variants.

// In every option you have to enter correct
// file name and real width of the page in that variant.
 
// List of page variants:

my_option('index_m.htm',250);
my_option('index_vga.htm',600);
my_option('index_xga.htm',1000);

// end of page variants
/*********************************************************/
if(my_wps_n!=''){window.open(my_wps_n,'_self')};//-->
</script>

---