• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Images moving out of container when page resizes

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

Views

851

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
community guidelines

correct answers 1 Correct answer

LEGEND , Jun 12, 2017 Jun 12, 2017

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 downlo

...

Votes

Translate

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

Votes

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
community guidelines
New Here ,
Jun 12, 2017 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.

Votes

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
community guidelines
LEGEND ,
Jun 12, 2017 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 …

Votes

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
community guidelines
New Here ,
Jun 12, 2017 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.

Votes

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

Votes

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
community guidelines
LEGEND ,
Jun 13, 2017 Jun 13, 2017

Copy link to clipboard

Copied

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

Votes

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
community guidelines
New Here ,
Feb 03, 2018 Feb 03, 2018

Copy link to clipboard

Copied

LATEST

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..  

Votes

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
community guidelines