Highlighted

Images moving out of container when page resizes

New Here ,
Jun 12, 2017

Copy link to clipboard

Copied

I have an couple of images placed inside a rectangle, but when the browser is resized, the images and container resize as well, but the spacings between the images do not resize and as a result, these images move out of the box.

Is it possible to solve this without the use of breakpoints, because I am using a jquery injector for animations and the individual ids for each element differs throughout different breakpoints causing the animation to only work for 1 of the breakpoints.

Any help is appreciated!

The more "chaotic" you layout becomes, the more you have to think about how you can tell Muse, which element should influence (= push up/down) which other. If it is not clear as in your case (which of the different sized object on the top is responsible to influence which other element?), you can help Muse by placing equally scaling (invisible) elements and group them with the "bad" behaving ones.

Have a look at this demo site: http://scaling-boxes.businesscatalyst.com/index.html​. You may download the corresponding .muse file directly from this sample site.

You may also like to read my answer (inclusive a sample site link) in this thread: https://forums.adobe.com/thread/2271454

Views

673

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

Images moving out of container when page resizes

New Here ,
Jun 12, 2017

Copy link to clipboard

Copied

I have an couple of images placed inside a rectangle, but when the browser is resized, the images and container resize as well, but the spacings between the images do not resize and as a result, these images move out of the box.

Is it possible to solve this without the use of breakpoints, because I am using a jquery injector for animations and the individual ids for each element differs throughout different breakpoints causing the animation to only work for 1 of the breakpoints.

Any help is appreciated!

The more "chaotic" you layout becomes, the more you have to think about how you can tell Muse, which element should influence (= push up/down) which other. If it is not clear as in your case (which of the different sized object on the top is responsible to influence which other element?), you can help Muse by placing equally scaling (invisible) elements and group them with the "bad" behaving ones.

Have a look at this demo site: http://scaling-boxes.businesscatalyst.com/index.html​. You may download the corresponding .muse file directly from this sample site.

You may also like to read my answer (inclusive a sample site link) in this thread: https://forums.adobe.com/thread/2271454

Views

674

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 12, 2017 0
LEGEND ,
Jun 12, 2017

Copy link to clipboard

Copied

No idea, what you mean! Give us a link!

Or even better: Give us a .muse file only with this "image/rectangle construction" (-> Dripbox or a similar file sharing service), then we'll see …

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 12, 2017 0
New Here ,
Jun 12, 2017

Copy link to clipboard

Copied

I do not have the website files with me now, but this sketchup should be clear enough.large browser size.png

The larger box represents the browser size while the second largest box represents the rectangle i was talking about.
The smaller boxes represent images inside the rectangle, which have been placed in muse

smaller browser size.png

upon shrinking the browser size, however, the images resize but the spacing remains the same, causing the images to overflow outside of the rectangle.

Is it possible to solve this without the use of breakpoints, because I am using a jquery injector for animations and the individual ids for each element differs throughout different breakpoints causing the animation to only work for 1 of the breakpoints.

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 12, 2017 0
LEGEND ,
Jun 12, 2017

Copy link to clipboard

Copied

Without a .muse example we merge into a neverending question and answer game – quite annoying and time consuming for helpers …

First questions:

  • Are the images placed or filled?
  • If filled: filled into an image container or a rectangle frame!
  • Is the "outer" rectangle a rectangle or an image frame?
  • How does is scale: Proportionally or horizontally?
  • Much more to come …

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 12, 2017 0
New Here ,
Jun 12, 2017

Copy link to clipboard

Copied

My apologies, I left my files at in my office computer.

The images are placed and the outer rectangle is a rectangle.
Both scale proportionally.

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 12, 2017 0
LEGEND ,
Jun 12, 2017

Copy link to clipboard

Copied

The more "chaotic" you layout becomes, the more you have to think about how you can tell Muse, which element should influence (= push up/down) which other. If it is not clear as in your case (which of the different sized object on the top is responsible to influence which other element?), you can help Muse by placing equally scaling (invisible) elements and group them with the "bad" behaving ones.

Have a look at this demo site: http://scaling-boxes.businesscatalyst.com/index.html​. You may download the corresponding .muse file directly from this sample site.

You may also like to read my answer (inclusive a sample site link) in this thread: https://forums.adobe.com/thread/2271454

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 12, 2017 1
LEGEND ,
Jun 13, 2017

Copy link to clipboard

Copied

Don’t need the file any more. The question already is answered.

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 13, 2017 0
New Here ,
Feb 03, 2018

Copy link to clipboard

Copied

I usually resolve this problem by making groups. I group objects so i have two main grouped sections. Then for muse logic is fairly easy to resize and mantain distances..  

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...
Feb 03, 2018 0