Skip navigation

Help with using Adobe Muse

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.

3140 Views 23 Replies Latest reply: adsal, Jan 14, 2013 9:23 AM

Replies

Currently Being Moderated

1. jgrummel,

Jun 26, 2012 10:13 AM in reply to AnneCarmen

Report

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

2. AnneCarmen,

Jun 26, 2012 11:05 AM in reply to jgrummel

Report

Yes they do extend to the end of the browser line.... funny thing is that this is not the first website I am designing and have the same problem.

|
Mark as:
Currently Being Moderated

3. AnneCarmen,

Jun 26, 2012 4:41 PM in reply to AnneCarmen

Report

Can.... maybe somebody from Adobe Muse elaborate on this issue? I am trying to find an answer to this annoying problem, but unfortunately nobody from Adobe seems to answer.... you would think that by paying the monthly service fee we would get some assistance....

|
Mark as:
Currently Being Moderated

4. jgrummel,

Jun 26, 2012 4:47 PM in reply to AnneCarmen

Report

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"></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"></div>

let me know if that helps!

|
Mark as:
Currently Being Moderated

5. jgrummel,

Jun 26, 2012 5:22 PM in reply to AnneCarmen

Report

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

6. AnneCarmen,

Jun 27, 2012 4:22 PM in reply to jgrummel

Report

Hi, it actually did not work...the same happens... and also on the older iPad not only the newer one. Thanks anyway... I am still waiting for somebody from Adobe to answer this.

|
Mark as:
Currently Being Moderated

7. AnneCarmen,

Jun 27, 2012 4:33 PM in reply to AnneCarmen

Report

here is one of the adobe site of the day
http://www.kjonesy.com/index.html

that has the width of the header extended the entire width of the browser... even in iPad. So it can be done... and if so can someone from Adobe explain to me how to do this? PLEASE????

Carmen.

|
Mark as:
Currently Being Moderated

8. jgrummel,

Jun 28, 2012 4:43 PM in reply to AnneCarmen

Report

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

9. Abhishek Maurya,

Jul 3, 2012 10:42 AM in reply to jgrummel

Report

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

10. AnneCarmen,

Jul 3, 2012 10:49 AM in reply to Abhishek Maurya

Report

Thank You for your prompt reply! Yes I got this, but my question is why is it working for some and why it isn't working for others?

|
Mark as:
Currently Being Moderated

11. AnneCarmen,

Jul 3, 2012 11:04 AM in reply to AnneCarmen

Report

And I really think that having a condenscending response like that coming from Adobe Staff Support is really giving Adobe a negative image... and Muse is a great product, no question about it ...but would like to remind EVERYONE that this is not beta anylonger, and we are paying for the product, so we are entitled to answers and support to our questions.

|
Mark as:
Currently Being Moderated

12. Abhishek Maurya,

Jul 3, 2012 11:34 AM in reply to AnneCarmen

Report

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

13. AnneCarmen,

Jul 3, 2012 11:52 AM in reply to Abhishek Maurya

Report

Hi,

OK i understand that the behavior is not supported in mobile devices, but can you explain what is the difference between these two sites - in the header for ex. why the first one is working 100% width in mobile devices and the second one is not?

http://http://www.kjonesy.com/index.html - featured in Adobe Muse site of the day - header 100% width is working in mobile devices

http://checkourwork.com/relivephotography/ - header is not working 100% width in mobile devices.

Maybe be can workaround this bug until the next few updates... hopefully.

Thank You.

|
Mark as:
Currently Being Moderated

14. Abhishek Maurya,

Jul 3, 2012 12:17 PM in reply to AnneCarmen

Report

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

15. AnneCarmen,

Jul 3, 2012 12:34 PM in reply to Abhishek Maurya

Report

Her are two screenshots of the two websites on my iPad. The first one looks fine... the second one is cut.

|
Mark as:
Currently Being Moderated

16. Abhishek Maurya,

Jul 3, 2012 1:10 PM in reply to AnneCarmen

Report

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

17. Wykco,

Jul 18, 2012 12:43 PM in reply to jgrummel

Report

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

18. jgrummel,

Jul 18, 2012 1:29 PM in reply to Wykco

Report

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

19. Wykco,

Jul 22, 2012 10:25 AM in reply to AnneCarmen

Report

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

20. MinimalGlen,

Aug 5, 2012 11:55 AM in reply to jgrummel

Report

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

|
Mark as:
Currently Being Moderated

21. j-wyman,

Aug 8, 2012 3:00 PM in reply to MinimalGlen

Report

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

22. DefineDetail,

Dec 6, 2012 8:37 AM in reply to j-wyman

Report

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

23. adsal,

Jan 14, 2013 9:23 AM in reply to AnneCarmen

Report

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: