Mobile site - content moved to the left

Hello everyone!
I recently completed a site: www.threesistersgarden.org and i'm having a few issues when the site is being viewed on mobile. The first two pictures below are using Google Chrome browser (most recent 37.0.2062.117). As you can see by the right edge, all the content with the exception of the header is actually moved to the left. I'm not sure why this as the case as there is nothing there on the master or the actual page itself that should force all the content over. The background image at the top is not full screen nor is the image stretched to the edges. Please help!
I know the site address up here says tssite.gor..etc but that was just where i took the screenshot. Even if you visit www.threesistersgarden.org the issue is still there.
This screenshot was taken using the built in browser on my Galaxy S3. I have the most up to date firmware version. As you can see here, the header and footer is move over to the left.
This same screenshot was taken when i tried to reload the page again. This time the header and footer don't move but you can see part of the logo and navigation menu is cut off. The links can only be selected by clicking the very bottom (ex the orange area shown).
Thanks for your help everyone! If you need more information, please don't hesitate to ask!

Hey Gaurav,
Yes the site is published. I believe I've figured it out and it had to do with the width of the page image extending beyond the blue lined border on the page.
View this on mobile:
On this link, i've shrunk the image and fit it within the blue lined border. The footer shows up correctly on the mobile site and nothing is pushed to the left http://tssite.gorillaboston.com/the-farm.html
This is the live page where the image extends beyond the blue lined border in the muse file but not beyond the white border http://www.threesistersgarden.org/the-farm.html
I don't understand though why its moving all the content over to the left.

Similar Messages

  • The footer is moving to the left and no longer centered. It is like it is no longer in the container

    The footer is moving to the left and no longer centered. It is like it is no longer in the container. I don't see the container outline any longer. This same thing is happening in two different websites. Can you tell me what I am doing wrong?
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Dragonfly Toy Puppies Home Page</title>
    <style type="text/css">
    <!--
    body  {
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
        color: #FFF;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 100%;
        background-color: #000;
    .twoColFixLtHdr #container {
        width: 900px; /* the auto margins (in conjunction with a width) center the page */
        border: none; /* this overrides the text-align: center on the body element. */
        background-color: #000;
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
    .twoColFixLtHdr #header {
        background-color: #000;
        background-image: url(Images/Header.jpg);
        background-repeat: no-repeat;
        height: 350px;
        width: 900px;
        padding-top: 0;
        padding-right: 0px;
        padding-bottom: 20;
        padding-left: 0px;
    .twoColFixLtHdr #sidebar1 {
        float: left; /* since this element is floated, a width must be given */
        width: 240px;
        height: auto;
        padding-top: 5px;
        padding-right: 0px;
        padding-bottom: 15px;
        padding-left: 0px;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        background-color: #000;
        text-align: center;
    a img {border: none;
    a { outline: 0;
    #sidebar1 a #poodle   {
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        display: block;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
        cursor: pointer;
        text-decoration: none;
    #sidebar1 a #maltese {
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        display: block;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
        cursor: pointer;
    #sidebar1 a #yorkie {
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        display: block;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
        cursor: pointer;
    #sidebar1 a #partiyorkie {
        display: block;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        cursor: pointer;
    #sidebar1 a #dachshund {
        display: block;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        cursor: pointer;
    #sidebar1 a #maltipoo {
        display: block;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        cursor: pointer;
    #sidebar1 a #morkie {
        display: block;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        cursor: pointer;
    .twoColFixLtHdr #mainContent {
        padding: 20; /* remember that padding is the space inside the div box and margin is the space outside the div box */
        background-color: #000;
        height: auto;
        width: 660px;
        text-align: center;
        margin: 0px;
        float: left;
    .twoColFixLtHdr #footer {
        background-color: #000;
        width: 900px;
        padding-top: 0;
        padding-right: 10px;
        padding-bottom: 0;
        padding-left: 10px;
        clear: none;
        float: none;
        height: auto;
    .twoColFixLtHdr #footer p {
        margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
        padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    -->
    </style><!--[if IE 5]>
    <style type="text/css">
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixLtHdr #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixLtHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="twoColFixLtHdr">
    <div id="container">
      <div id="header">
      <!-- end #header --></div>
      <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#">Home</a>      </li>
          <li><a href="#">Services</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">Sires &amp; Dams</a>
            <ul>
              <li><a href="#">Toy Poodles</a></li>
              <li><a href="#">Maltese</a></li>
              <li><a href="#">Yorkies</a></li>
              <li><a href="#">Parti Yorkies</a></li>
              <li><a href="#">Mini Dachsunds</a></li>
              <li><a href="#">Maltipoos</a></li>
              <li><a href="#">Morkies</a></li>
            </ul>
          </li>
          <li><a href="#">Puppy Care</a></li>
    <li><a href="#">Success Stories</a></li>
    <li><a href="#">Contact Us</a>      </li>
    </ul>
      <div id="sidebar1">
        <h2>Puppies for Sale</h2>
        <p> Click on your Favorite Breed</p>
        <h2><a href="poodle.htm" onmousedown="MM_swapImage('poodle','','Images/poodle_active.jpg',1)"><img src="Images/poodle_link.jpg" alt="Link to Poodle Puppy Page" name="poodle" width="200" height="250" id="poodle" onmouseover="MM_swapImage('poodle','','Images/poodle_hover.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
          <a href="maltese.htm" onmousedown="MM_swapImage('maltese','','Images/maltese_active.jpg',1)"><img src="Images/maltese_link.jpg" alt="Link to Maltese Puppy Page" name="maltese" width="200" height="200" id="maltese" onmouseover="MM_swapImage('maltese','','Images/maltese_hover.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
          <a href="yorkie.htm" onmousedown="MM_swapImage('yorkie','','Images/yorkie_active.jpg',1)"><img src="Images/yorkie_link.jpg" alt="Link to Yorkie Puppy Page" name="yorkie" width="200" height="200" id="yorkie" onmouseover="MM_swapImage('yorkie','','Images/yorkie_hover.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
          <a href="parti_yorkie.htm" onmousedown="MM_swapImage('parti_yorkie','','Images/partiyorkie_active.jpg',1)"><img src="Images/partiyorkie_link.jpg" alt="Link to Parti Yorkie Puppy Page" name="partiyorkie" width="200" height="200" id="partiyorkie" onmouseover="MM_swapImage('partiyorkie','','Images/partiyorkie_hover.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
          <a href="dachshund.htm" onmousedown="MM_swapImage('dachshund','','Images/dachshund_active.jpg',1)"><img src="Images/dachshund_link.jpg" alt="Link for Mini Dachshund Puppy Page" name="dachshund" width="200" height="200" id="dachshund" onmouseover="MM_swapImage('dachshund','','Images/dachshund_hover.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
          <a href="maltipoo.htm" onmousedown="MM_swapImage('maltipoo','','Images/maltipoo_active.jpg',1)"><img src="Images/maltipoo_link.jpg" alt="Link for Maltipoo Puppy Page" name="maltipoo" width="200" height="200" id="maltipoo" onmouseover="MM_swapImage('maltipoo','','Images/maltipoo_hover.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
        <a href="morkie.htm" onmousedown="MM_swapImage('morkie','','Images/morkie_active.jpg',1)"><img src="Images/morkie_link.jpg" alt="Link to Morkie Puppy Page" name="morkie" width="200" height="200" id="morkie" onmouseover="MM_swapImage('morkie','','Images/morkie_hover.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></h2>
      </div>
    <!-- end #sidebar1 --></div>
      <div id="mainContent">
        <h1>Welcome </h1>
        <p>This Website is under Construction</p>
        <h2>Check Back Soon</h2>
      <!-- end #mainContent --></div>
        <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
    <div id="footer">
        <p>Footer</p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

    You have an extra closing </div> where none is required.
    Beggining on line 215 of your code, change this:
    </div>
    <!-- end #sidebar1 --></div>
    to this:
    <!-- end #sidebar1 --></div>
    When problems occur, the W3C code validation tools will help you find errors in your code.
    Code Validation Tools
    CSS - http://jigsaw.w3.org/css-validator/
    HTML - http://validator.w3.org/
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com/

  • Under Site Contents - Where is the add a Page or Web Part Page option.

    It seems the only way to add a page to a site is to create a document library first.

    Where is the SitePages Document Library.
    Up next to SkyDrive I click Sites. I select "My Child Site" It is a brand new site. Under the Cog there is Shared With, Edit Page, Add an app, view site contents and getting started. On the left I have Home, Site contents. If I go into Site contents I have
    the option of Lists, Libraries and other Apps or the option to create a new subsite. 
    Just to be sure I clicked Create a new Subsite". Once it is up I still don't have an option to create a page. And under the Cog I have the same settings as before.
    It seems like I have to create a document library app, create a page in the library, Add the app as a web part to the home page and then have a lot of clutter from the document library app. e.g. +new document or drag files here, current view... As opposed to
    a list of links to the pages. 
    It seems like a site should also be a document library or list to begin with. 
    I could swear in 2010 when you were in a new site you could could click create a page from the home page.

  • Everytime i go to watch a video on youtube, weather it be the mobile site, desktop version or the app, it always says 'video unavailable on this device' this only started happening in the last few weeks! Can someone help???

    Everytime i go to watch a video on youtube, weather it be the mobile site, desktop version or the app, it always says 'video unavailable on this device' this only started happening in the last few weeks! Can someone help???

    Most YouTube content requires the Flash plugin. Sometimes it's necessary to uninstall then reinstall that plugin.
    Uninstall the Flash plugin then reinstall new >  Troubleshoot Flash Player | Mac OS
    Very important to uninstall the currently installed plugin first.
    Now launch Safari and try a video.
    If you have the ClickToFlash extension installed, that can prevent Flash based video from streaming. It can also be installed as a plugin in /Library/Internet-Plug-Ins.
    And check to see if Safari is running in 32 bit mode. Right or control click the Safari icon in your Applications folder then click Get Info. If the box next to:  Open in 32 bit mode  is selected, deselect, quit then relaunch Safari.
    You may also need to delete the cache associated with Safari .
    Open the Finder. From the Finder menu bar click Go > Go to Folder
    Type or copy/paste:   ~/Library/Caches/com.apple.Safari
    Click Go the move the Cache.db file from the com.apple.Safari folder to the Trash.
    Quit and relaunch Safari. Try a video.

  • My scrollbar unexpectedly has moved to the left side of the screen (only in Firefox), and I don't know how to move it back

    my scrollbar has unexpected moved to the left side of the screen in stead of the right side, and I don't know how to move it back. This only occurs in Firefox.

    Set the pref layout.scrollbar.side to ''2'' to place the scroll bar at the right side.
    See:
    * http://kb.mozillazine.org/layout.scrollbar.side (default is 0: user interface)

  • UWL Screen Customization - Refresh Link moved to the Left side

    Hi Experts,
    The UWL changed just a little bit our requirement,  the 'Refresh' HyperLink has been moved to the Left  side of the screen.
    I have been doing a lot of research but I can not find any documentation on how to do this. Anyone
    able to help me out with this?
    Thanks
    Srinivas

    Hi Srinivas,
    A printscreen of the issue is welcome. The refresh icon in the standard uwl is a small icon on the right hand side.
    So your mission is to align the refresh button to the left?

  • Satellite L300 - Icons moved to the left

    All icons on function bar, on Satellite L300, have moved to the left . Tried to bring them back to normal position with mouse but failed.
    What can i do?
    Thank you

    Hi buddy,
    Hmm... What icons you mean exactly? Do you mean the desktop icons?
    If yes you can move them via drag and drop. Thats pretty easy.
    By the way: What operating system you have?

  • My desktop icons mysteriously moved from the left to the right part of the screen. When I try to drag them back to the left, they pop back to the right when I release the mouse. What can I do?

    My desktop icons mysteriously moved from the left to the right of the screen, and scrambled the order. When I try to drag them back to the left, they pop right back to the right when I release the mouse. What can I do to place them where I want them on the screen?

    A LOT of them dont appear.
    What do you see in the window when you click on those?  A blank, black window?  An exclamation mark?  What?

  • Content sticks to the left on tablet view

    Hello. I am having a very frustrating issue in Muse where the content in tablet view is sticking to the left. I have tried a number of thing such as removing the menu (I heard it had caused issues for someone else) and removing full width items - but even though in the muse design it is perfectly centered, when published (to a temp site) it is all sticking left. Any ideas would be much appreciated.
    Thank you.

  • What are the drawbacks to adding a Site Content Type to the Document Site Column?

    I have a client who has enough SharePoint knowledge to be dangerous.
    They are requesting that a Column be added to all Document Libraries everywhere.  We built a solution that would require a bit of work when a Site Collection is created, and it would require that we run a script to identify if there are any Libraries
    that do not have this Column attached.
    This client wants to know why we didn't just add this Column to the default Document Site Content Type.  I don't know specifics as to why that's not a good idea, just that it's not a good idea.
    Can anyone point me to a resource that identifies the reasons why this is not recommended?
    Thank you

    I'd say there's a risk that patches or upgrades could be affected by this, or overwrite the change.
    In the past I've derived a Company specific Document Content Type from the Base Document CT, and added any new company wide columns to that new CT.
    w: http://www.the-north.com/sharepoint | t: @JMcAllisterCH | YouTube: http://www.youtube.com/user/JamieMcAllisterMVP

  • How can I stop my site from appearing at the left in the tablet and phone layouts?

    At the moment my site works on desktop browsers but appears pinched to the left on phones and tablets.
    www.lrproductions.biz
    I have checked for any miscellaneous text boxes, and I also removed the scrolling fx to try and fix the the bug. Nothing seems to be working. I would really appreciate any help.
    Hughie

    Hello,
    Please make sure that there is no element line rectangle or text box outside browser are in Phone and tablet layout.
    If it is then either delete them or move it inside browser area.
    To find the exact browser area Please click on View > Show Grid Overlay. Pink Shaded area is the browser area.
    Please let me know if it do not work for you.
    Regards
    Vivek

  • Why does my mobile site only display in the iPhone and not the Samsung Galaxy?

    Hi,
    I created a mobile version of my Muse site. After publishing it to the temporary Catalyst site, I went to view it on my Samsung Galaxy Victory; it displayed properly the first couple of times I viewed it. Then I made some changes and re-published it and I can only see the desktop version on my phone. I tested it on my co-worker's iPhone and the mobile site displayed correctly on her phone.
    Any insight??
    Thanks,
    Myriam

    Hi Myriam,
    This is most likely the browser cache and cookie issue on your mobile browser. Please clear the browser cache as well as delete the cookies and then try.
    Cheers!
    Aish

  • My Macbook Pro (OSX 10.6.7 2.26 GHz Intel Core 2 Duo) has started misbehaving on me. When I'm working, the cursor will start spontaneously moving to the left in a straight line, and randomly right clicking on things.  If I close the computer and open it b

    my Macbook Pro (OSX 10.6.7 2.26 GHz Intel Core 2 Duo) has started misbehaving on me. When I'm working, the cursor will start spontaneously moving to the in a straight line, and randomly right clicking on things.
    If I close the computer and open it back up, it sometimes stops for a little while, then will spontaneously start again. Any help would be truly appreciated. Thanks!

    See this knowledge base article. Also, you might want to update to 10.6.8 (don't know that that will fix your problem, but it's the latest version of Snow Leopard).
    Clinton

  • Print Heads not moving to the left even after holding * button

    I did all the tricks to get the printheads to the left in order to replace them.   I cannot get them to move.   I know they work because the printer will print a b/w copy.   Is there any other tricks?   Even my MIS manager can't figure this out.  HELP!!!!
    I need to change the printheads.  

    Hello,
    Please click HERE to access the steps that should resolve the issue .
    If issue still exists, please call HP Tech Support for further assistance as it could be a hardware issue.
    If you are in US , the toll free # is 1-800-474-6836 .
    If you are not in US , then log on to www.hp.com , at bottom-left corner there is a world map icon, click on it and then select the region you belong to, which would then provide support options for you for that region.
    Regards,
    Jabzi
    Give Kudos to say "thanks" by clicking on the "thumps Up icon" .
    Click "Accept as Solution" if it solved your problem, so others can find it.
    Although I am an HP employee, I am speaking for myself and not for HP.

  • Drawing Automation: Why is it moving to the left of where I draw???

    Hey everybody!
    OOOOK. I've run into a problem in 8 that I also had with LP7. It's pretty simple to explain (I think). When I draw in automation using the Marquee tool and then drag the automation up or down, Logic slides the automation information over to the left. For example, when I am editing Volume Automation, I drag the marquee over all of bar 5 and pull that automation down a few dB, but Logic then moves the automation to bar 4 beat three to bar 5 beat three. It works like that everywhere in my session. Another example: I highlight pan automation using the marquee tool from bar 6 beat 1 to bar 6 beat 3 and pull it up (which would mean left with panning) and Logic will move that automation info to bar 5 beat 4 to bar 6 beat 2.
    If that doesn't make sense I'd be happy to try and clarify further.
    What's going on here? Anybody know? Is this particular session just corrupt? Anyone who can shed some light on this would be much appreciated! The marquee tool is a really great and convenient tool but when it's not working the way it's supposed to it's very frustrating.
    THANKS!!

    Great idea, but no...it didn't correct the problem. I did try it though.
    Here's a weird observation: The only time I've had corrupt Logic files in the past month is when I assign a different icon than the default to any of the tracks. And I'm not using my own icons...I'm using the icons that come with Logic and show up in the menu. I don't have time to test this some more at the moment but might do it some more soon to see if that's in fact what's causing things to go crazy.
    Any other experiences similar to my own?

Maybe you are looking for

  • 16:9 DVD cropped on LCD TV

    Hi there, This is a problem I have noticed before, but after a lot of searching, have not been able to find a solution yet. I have put together a company showreel which consists of a few menus and 12 or so video clips. The project is all set up as 16

  • Report CO24 not getting executed

    HI friends, i could able to execute co24 missing parts info in my dev. server but i can't able to do in my Prod. server and i am getting following error message. infosystem can not be used(start report PPCOXPR!) please respond at the earliest. Daniel

  • PDF convertion - hebrew font upload problem

    Hello, I am trying to define hebrew support to pdf convertion according to note 569404 - but whenever i try to run the RSTXPDF2 report - instead of getting the browse window to choose from where i upload the fonts - the report directly goes to the en

  • Document entry report

    Dear Friends Is there any report  to view  the  only document entry of particular GL account that has been posted for a period.( Only document entries) Eg; When we post a document. The line items will be recorded into GL account. What we are looking

  • Required tabstrip and subscreen program

    hi all any body can send me the sample program for tabstrip and sub screen program. and send me the documentation how to work on tabstrip and subscreens. thanks, maheedhar