Highlighted

How to keep graphics from moving between breakpoints - is this a pinning problem?

New Here ,
Jun 21, 2017

Copy link to clipboard

Copied

Hi all! I could use some help on my portfolio I'm designing.

This is how it looks like at a breakpoint:

Screen Shot 2017-06-21 at 12.09.13 PM.png

This is how it looks in between breakpoints:

Screen Shot 2017-06-21 at 12.09.25 PM.png

Screen Shot 2017-06-21 at 12.09.35 PM.png

Things I've tried:

  • Pin everything to browser left, right, center
  • Pin everything to page left, right, center
  • Pin nothing
  • Various combinations of pinning the black shape and picture and not the text, vice versa, etc.

All of these resulted in various amounts of movement seen above.

Is this a pinning problem or a breakpoint problem or am I just missing something? They move mere pixels before and after the breakpoints. Same problem in the browser when I preview it as well.

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

As I assumed above, elements are different set in their resizing. Elements are different pinned, even to browser (Head).

Pinning to browser at least for mobile is not recommended.

All Head elements are pinned to the top center, even the right and left elements. That´s one reason you need so many breakpoints.

There is a black rectangle with no real function, set to browser width and the surrounding elements resize different ( at the bottom in your layers panel).

Your elements TARGET, COMMUNICATE, EXECUTE with graphic elements, text behaves very different.

Home

Watch your file, reduced to the moving graphic elements. Watch properly the header (pinning to container), not sure, if the menu works like this. Watch the download button (pure text) and you may realize how "difficult it might be for muse to decide how elements should behave together. I did now an easy way and grouped all content. At the bottom, above the footer you may also see the difficulties.

You would have to do decisions.

Please read all advices from Guenter very properly and watch.

Best Regards,

Uwe

Views

404

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to keep graphics from moving between breakpoints - is this a pinning problem?

New Here ,
Jun 21, 2017

Copy link to clipboard

Copied

Hi all! I could use some help on my portfolio I'm designing.

This is how it looks like at a breakpoint:

Screen Shot 2017-06-21 at 12.09.13 PM.png

This is how it looks in between breakpoints:

Screen Shot 2017-06-21 at 12.09.25 PM.png

Screen Shot 2017-06-21 at 12.09.35 PM.png

Things I've tried:

  • Pin everything to browser left, right, center
  • Pin everything to page left, right, center
  • Pin nothing
  • Various combinations of pinning the black shape and picture and not the text, vice versa, etc.

All of these resulted in various amounts of movement seen above.

Is this a pinning problem or a breakpoint problem or am I just missing something? They move mere pixels before and after the breakpoints. Same problem in the browser when I preview it as well.

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

As I assumed above, elements are different set in their resizing. Elements are different pinned, even to browser (Head).

Pinning to browser at least for mobile is not recommended.

All Head elements are pinned to the top center, even the right and left elements. That´s one reason you need so many breakpoints.

There is a black rectangle with no real function, set to browser width and the surrounding elements resize different ( at the bottom in your layers panel).

Your elements TARGET, COMMUNICATE, EXECUTE with graphic elements, text behaves very different.

Home

Watch your file, reduced to the moving graphic elements. Watch properly the header (pinning to container), not sure, if the menu works like this. Watch the download button (pure text) and you may realize how "difficult it might be for muse to decide how elements should behave together. I did now an easy way and grouped all content. At the bottom, above the footer you may also see the difficulties.

You would have to do decisions.

Please read all advices from Guenter very properly and watch.

Best Regards,

Uwe

Views

405

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 21, 2017 0
Adobe Community Professional ,
Jun 21, 2017

Copy link to clipboard

Copied

Without seeing the .muse, some objects resize in width and height and some do not resize the same way, I guess.

You could try grouping elements but am not sure if this solves everything.

Pinning is not recommended for fluid width breakpoints anyway (except pin to container).

If you still face issues, could you provide a .muse via dropbox or similar filesharing?

Would be best to create an extra site with one page with these three elements which behave strange.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 21, 2017 1
New Here ,
Jun 21, 2017

Copy link to clipboard

Copied

Dropbox - Muse Help.muse

Here's the file. I left the page as is because it's how it interacts with the bottom and top squares that make it strange.

I tried grouping it but the text still moves and there's a space between the top and bottom still. I put a black box in the background to try and hide the giant gap, but it still looks weird.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 21, 2017 0
LEGEND ,
Jun 21, 2017

Copy link to clipboard

Copied

As fotoroeder said, we normally need the .muse file to check this. But: If you send us a .muse file (for example via Dropbox or a similar file sharing service), please only link a small file with only one page and some clear simple examples, not a complete website! We want to help, not to create websites for community members!

The problems, you are seeing, have been discussed here over and over again and are typical issues, when creating responsive pages. Before sending a. Muse file, read these links very carefully. This normally should cover the issues you are encountering:

https://forums.adobe.com/thread/2345133

https://forums.adobe.com/message/8749608#8749608

https://forums.adobe.com/thread/2342024

If this doesn't help, upload a small .muse file (delete all unnecessary elements and pages), which shows the problem, to Dropbox or a similar service and we'll have a closer look.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 21, 2017 1
Adobe Community Professional ,
Jun 21, 2017

Copy link to clipboard

Copied

As I assumed above, elements are different set in their resizing. Elements are different pinned, even to browser (Head).

Pinning to browser at least for mobile is not recommended.

All Head elements are pinned to the top center, even the right and left elements. That´s one reason you need so many breakpoints.

There is a black rectangle with no real function, set to browser width and the surrounding elements resize different ( at the bottom in your layers panel).

Your elements TARGET, COMMUNICATE, EXECUTE with graphic elements, text behaves very different.

Home

Watch your file, reduced to the moving graphic elements. Watch properly the header (pinning to container), not sure, if the menu works like this. Watch the download button (pure text) and you may realize how "difficult it might be for muse to decide how elements should behave together. I did now an easy way and grouped all content. At the bottom, above the footer you may also see the difficulties.

You would have to do decisions.

Please read all advices from Guenter very properly and watch.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 21, 2017 1