Skip navigation
Currently Being Moderated

Header and footer extending to the width of the browser in mobile devices is not working

Jun 26, 2012 7:08 AM

Tags: #browser #width #mobile_devices

Can somebody tell me why this feature is not working in mobile devices... at least for me? I've seen some websites done with Muse and they seemed to be expending to the width of the screen in ipads for ex. My sites are all cut on the right side and don't seem to have a good explanation for it. I would really appreciate if someone will give me some feedback.

 

Here is an example.

 

http://checkourwork.com/relivephotography/index.html

 

Thanks.

 
Replies
  • Currently Being Moderated
    Jun 26, 2012 10:13 AM   in reply to AnneCarmen

    That's so bizzare! It looks just fine on my Android phone, however, on the iPad, the top and bottom rectangles seem to be cut off. Do they extend to the end of the browser line in muse? The smart guides should let you know if they are touching.

     

    -Julia

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 26, 2012 4:47 PM   in reply to AnneCarmen

    If you go into your HTML code, you can probably fix it by removing the "width" property of the div.

     

     

    <div style="margin-left: 0px; left: 4.5px; width: 1291px; margin-right: -1291px;" class="browser_width grpelem" id="u70"><!-- simple frame --></div>

    remove the bold part of the div tag. If that doesn't work, try making the width 100% so it says:

     

    <div style="margin-left: 0px; left: 4.5px; width: 100%; margin-right: -1291px;" class="browser_width grpelem" id="u70"><!-- simple frame --></div>

     

    let me know if that helps!

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 26, 2012 5:22 PM   in reply to AnneCarmen

    It seems as though right now, Muse doesn't seem to be able to generate divs that are 100% width. And new iPad has retina display, which means that the resoluation is much higher than the computer that you created on Muse site on. So while it looks perfect on a lower resolution computer, the retina display on the ipad will find the end of the extremely wide div that you created in Muse, because the screen has a greater width. So in order to fix it, you'll have to play around with the HTML and CSS code to get it to full optimization.

     

    -Julia

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 28, 2012 4:43 PM   in reply to AnneCarmen

    The easiest way I've found to get around that little bug, is to make your header image that you want extended the background of your browser fill. Let me know if this helps.

     

    -Julia

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 3, 2012 10:42 AM   in reply to jgrummel

    Everyone,

     

    This has been acknowledged as a bug and we will be investigating this to be fixed in a future release. As of now we don't have any workarounds.

     

    Regards,

    Abhishek Maurya

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 3, 2012 11:34 AM   in reply to AnneCarmen

    Hi AnneCarmen,

     

    Apologies for the late response. This is the first time the issue was reported in details by one of the community member on a different thread. You can check that here, http://forums.adobe.com/message/4521947#4521947

    This made it easier for the development team to bottle neck the area that needs to be fixed. Now, the team is working on it and we hope to have this fixed once and for all in the next few updates, but at the same time I don't have an ETA for you.

     

    I understand that it may work in some cases depending upon the design of the page, however, Muse still is not designed to support web sites for Mobile devices or Smartphones.

     

    Check this FAQ for more information, My site doesn't work on mobile/tablet/smartphone devices. Why?

    http://forums.adobe.com/thread/1019940

     

    Muse pages are currently coded to work with desktop browsers. You may experience inconsistent display/behavior on mobile devices. The team is currently exploring workflows and solutions for mobile/tablet device browsers.  Please provide feedback about mobile site design to the Muse product team in the following topic:

     

    Muse team looking for Mobile Website feedback

     

    Regards,

    Abhishek Maurya

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 3, 2012 12:17 PM   in reply to AnneCarmen

    Hi AnneCarmen,

     

    I have checked both the links that you provided. Even though it is hard to notice, but it is not working on either of them.

     

    - http://project02.businesscatalyst.com/jing/2012-07-04_0038.png - First Link

    - http://project02.businesscatalyst.com/jing/2012-07-04_0038_001.png - Second Link

     

    And since it is difficult to notice that's why it has existed so far, but now since we have this documented, it should be fixed asap.

     

    Regards,

    Abhishek Maurya

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 3, 2012 1:10 PM   in reply to AnneCarmen

    Hi AnneCarmen,

     

    I understand the point you are trying to make here, however, I would just reiterate that the difference is in the way the web sites were designed. Different page elements have different set dimension on different web sites. This is known to the development team and they will be working on it to fix it. This is related to the screen cast posted by GVD321 on this thread - http://forums.adobe.com/message/4521947

     

    Regards,

    Abhishek Maurya

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 18, 2012 12:43 PM   in reply to jgrummel

    Hi Juilia,

     

    I am having the same issue, but with a rectangle at the footer: http://forums.adobe.com/message/4563862

     

    Can you elaborate please? If I understand, you are suggesting to make a an image that is the full height of the site, then fille the page background with it and repeat it horizontally?

     

    Thank you.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 18, 2012 1:29 PM   in reply to Wykco

    Yes, that is exactly what I'm saying... The only problem is, it retricts the size if your body to whatever height your backgorund is... so you must take that into consideration.

     

    Julia

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 22, 2012 10:25 AM   in reply to AnneCarmen

    I am having a similar issue, bug, problem, whatever. http://forums.adobe.com/message/4565816

     

    Try disabling Javascript  on the mobile devices, then refresh the page.

     

    When I disable Javascript within Safari on the iPad/iPhone, it works.

     

    But I need Javascript! So hopefully this gets figured out soon. Good luck.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 5, 2012 11:55 AM   in reply to jgrummel

    Any more info on when this issue is going to be fixed?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 8, 2012 3:00 PM   in reply to MinimalGlen

    Hi Abishek and Julie,

    Do you have an update on when you expect this bug to be fixed? I was having this issue on mobile devices and on Adobe Browser Labs (even though the browser did show the header and footer @100%).

     

    Thanks!

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 6, 2012 8:37 AM   in reply to j-wyman

    I think I can help out with a little fix that seems to work for me, but only on iPad's.

     

    I've changed the meta viewport to this:

    <meta name="viewport" content="width=device-width; maximum-scale=1.0;">

     

    This has changed on the layout for the 100% wide header etc on my sites to fill the page, although only in landscape. I've been playing with settings, no joy for any further fixes yet, hope that helps someone.

     

    Thanks, Ben @ Define Detail

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 14, 2013 9:23 AM   in reply to AnneCarmen

    I was having the same problem even on desktop.  I just deleted the rectangle and drew another one and it worked.  Must have been something to do with the added content. 

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points