MUSE: Buttons Move on Resize (MOBILE)

[ts29661989]

my website is mainly designed for mobile phone use only.

my breakpoint is set at 380

there are different preview modes; iPhone 5S, iPhone 6, iPhone 6 Plus, Nokia Lumia 1020, and Samsung Galaxy S5

for each of the different previews the graphic JPEG adjusts accordingly... which is great but... on each JPEG i have one to three buttons that are positioned precisely.

these buttons SHIFT their positioning on the different phone previews and its mandatory that the buttons stay in their appropriate places.

Is there any modification i can make to prevent this from happening?

thank you

[Günter Heißenbüttel]

Yes, there is. Give us a .muse file (—> Dropbox) with only these elements (JPG, buttons) and we'll probably can show you the reason.

[ts29661989]

Hi Gunter, thank you for helping.  there's probably a simple solution.  its a JPEG business card with a transparent button over top of the PHONE NUMBER and WEBSITE ADDRESS.   for the most part it works for all of the previews for all phones except iPhone 5S where the button widgets are misplaced due to a smaller screen size.

ALSO, is there a way to have a permanent menu at the bottom of the mobile phone screen to tap buttons such as BACK, TOP ?

how do i put code behind a button for "BACK" and "TOP".   I suppose that "TOP" would refer to an anchor.

Thank you,

Thomas

Dropbox - muse-test

[Günter Heißenbüttel · Accepted solution]

Problem 1: "Moving boxes"

The problem, you are facing, often happens to users, who are not really acquainted to web design. I already described this in this forum several times.

Web pages are dynamic, what  among others – means, that element influence each other (pushing them down, lifting them up and so on). To decide, which element influences which other, is very difficult, because the elements often are scaling (when the browser window is scaled) in different ways: Text boxes scale horizontally, but grow vertically, when its width is minimised; images are scaling proportionally, rectangles are scaling horizontally or proportionally. And more: Often there are element scattered on the page and Muse can’t decide, which of these elements is designated, to push down other elements.

In your case you have:

• a text box ("Hello") scaling horizontally,

• images, scaling proportionally

• several rectangle with rounded corners, scaling horizontally

The 2 main errors:

1. If your image scales proportionally and the rectangle only scale horizontally, you will never(!) be able to keep these elements synchron – what is not a Muse problem, but a logical fact. 1st part of the solution: Assign "Resize: Responsive Width and Height" to all of these rectangles.
2. You have many scattered element on the page, and Muse can’t simply know or decide, which element should influence which other. So you have to help Muse, which leads us to the 2nd part of the solution: Place transparent elements between the objects (without overlapping!), which you want to push each other up or down, and group them. This is the way, you can tell Muse, what you want to achieve. Here a link to your site, which I have modified accordingly. To make the changes obvious, I colored the new added elements and the "buttons" you have placed: https://dl.dropboxusercontent.com/u/7046655/Website-Y-phone_Mod.muse

Problem 2: Anchors

2. Jumping to "top" or "bottom" can be realised with anchors:

• Place anchors always vertically aligned at the left edge of your page/breakpoint.

• Place an object of your choice (rectangle, text box, image, …) and use the "Hyperlinks" dropdown menu to assign the anchor.

Your example ("Website-Y-phone") probably won’t work anyway. Why?

If you jump to an anchor, your web browser tries to move your page, until this anchor is placed exactly in the top left edge of your browser window. If your site is too short, this can’t be the case, because the bottom of the page is reached, before the anchor can be placed in the top left corner of the browser window.

Problem 3: Permanent menu at the top of the page:

Yes, this is possible:

• Place a standard menu

• Configure it to be "manual" by clicking onto the small blue dot, which is shown top right of the menu.

• Assign the anchors you like to every single menu entry

• Pin the menu on top using the "6 dot pinning" icon, shown in the upper control strip.

[ts29661989]

Gunter... thank you.  that "trick" resolved my problem.   my page is going to be much longer and i'm still not sure how to have a fixed or floating menu so that the user and click on "BACK", "TOP"

I'll try what you suggested under your explanation for PROBLEM 3.

thanks again.

[mh87161772]

hello,

I am having a similar problem with floating buttons that I need to have aligned and respond with a certain image.

can you please elaborate the instruction for:

2. You have many scattered element on the page, and Muse can’t simply know or decide, which element should influence which other. So you have to help Muse, which leads us to the 2nd part of the solution: Place transparent elements between the objects (without overlapping!), which you want to push each other up or down, and group them. This is the way, you can tell Muse, what you want to achieve. Here a link to your site, which I have modified accordingly. To make the changes obvious, I colored the new added elements and the "buttons" you have placed