Chocolate Theme Issues

**skippastep** · 14 May 2014, 04:19 PM

I currently have Xara 9 premium and contemplated upgrading to 10, but having serious issues with the chocolate theme I think I need to address first. When I view my website on my phone (iphone and Android) it cuts off the left side of my pages on my website. Even viewing the template theme as-is it cuts it off. I have added coding and even removed the coding below, but it still did not fix the issue: <meta name="viewport" content="width=device-width"> or <meta name="viewport" content="initial-scale=1.0">. Also, when I preview the website before publishing, the navigation works correctly, drop down when mouse over resources, then retracts when mouse off. The menu hi-lights a darker color when mouse over as well. However, when I published it the drop down gets stuck in the drop down view and doesn’t retrack when mouse off and the menu does not hi-light dark. Do I need to change the order of my layers, change menu pop-up formats, or adjust margins somewhere to fix all this stuff? My site is www.skippastep.magix.net. Please keep in mind I am very new to web building with absolutely no coding skills and will require hand-holding to figure this out.

**gwpriester** · 14 May 2014, 04:39 PM

Welcome to TalkGraphics

Did you edit the variant site? I have not used this template but I know that when you create a variant for a mobile site, WD copies the text, graphics, and images from the full size site and pastes them onto the smaller page size. BUT, you need to manually scale everything down to the smaller page size.

Is this the case.

**skippastep** · 14 May 2014, 05:12 PM

Thank you for replying so quickly! Variant site? I used the chocolate theme that came with the Xara Designer Premium 9 version. I used the template for the basic layout and theme colors, but changed things up on it. When I published my revised version I noticed it cut off the sides like I had images and words too far off to the left of the page. I played with it and even uploaded the template index page as-is with no changes to it and realized even the original template seems to be doing the same thing with the cutoff. I even went so far as to create the site from scratch and just copied images and everything to the new one and I can't seem to get my page to show on the mobile device (portrait and landscape both have same issue). The only way I can get it to view is to severly indent everything to the right, but that seems like a lot of work. The site is www.skippastep.magix.net.

**Merlin_AZ** · 14 May 2014, 07:06 PM

Did you create a variant site?
I'm not seeing one when I decrease the size of the browser.

**jamesd** · 14 May 2014, 07:47 PM

Hi Skippastep,
Two things I noticed from checking your website code...

You have put <div id="fb-root"></div> in the <head> section, this should be placed in the <body> section.

Remove <meta name="viewport" content="width=device-width, initial-scale=1.0"/> which you have placed in the <body> section of your page as xara already adds this to the <head> section of your page.

These might not be the cause, but should be fixed anyway

**skippastep** · 14 May 2014, 09:30 PM

Jamesd - not sure where the <div id="fb...> is coming from in the head section. I will double check it and make sure I didn't accidentally add it. Thank you! I was trying everything under the sun to get my entire page to show whether scrolling to the left or forcing it to show on the screen and nothing was working. My previous site I made using xara 9 required me to put in that statement so that the width of the page would load to fit the iphone device. Without it, it would cause it to view just a small section and then I had to manually zoom out. Everything still showed on the page regardless whereas this one looks like I'm putting text and images outside the page margin. I will remove the statement and republish it this evening. Please bear with me, I am muddling thru this web designing stuff.