Text and rectangle box overflows

[arnauds35092249]

Hello,

I have made a responsive design with different breakpoints. In rectangle boxes (for background) i have placed text boxes. In certain cases the text overflows the rectangle box below or when resizing the browser the rectangle boxes shift place, leaving spacing in between the rectangle boxes, in this spacibg the browser fill is showing through. In some breakpoints (320, 1080px) everything works fine. This issue seems to occur especially in between breakpoints.

I have contacted adobe support where i was provided with a workaround: filling the textbox background but this won't fill to browser width, offering no solution. I was told that Adobe Muse at this point does not have this feature but it seems crucial to me for any kind of responsive design.

Nowhere on the internet, youtube or adobe guides i was able to find information on this topic.

Any help would be very appreciated,

Thank you!

[Günter Heißenbüttel]

Please give us a small(!!) .muse file to demonstrate your issues. Normally this should be fixable.

Please follow these instruction, when you share your .muse file:https://forums.adobe.com/docs/DOC-8652

[arnauds35092249]

Hello Günter,

I have reduced the file as instructed, you can view both issues with text and background in the two files. When resizing the browser you will notice what is wrong.

Adobe Creative Cloud (rectangle issue)

Adobe Creative Cloud (text issue)

Thanks,

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

Not sure, what your issue is – or better: Your „issue“ isn’t an issue at all.

First of all:

• Please unpin all your elements. In this layout there is absolutely no need to pin something.
• What is your responsive breakpoint at 320 px for? You tell your layout to resize at 320 px or smaller. But what is „smaller“ in this case? Your minimal page width for this breakpoint is set to 320 px too! You tell the layout to resize, but it can’t resize, because the minimal page width doesn’t allow! Please, delete this weird 320 px fluid breakpoint. It serves for nothing.

Your „issues“:

1. „Rectangle issue“

The green colour is applied to the browser background. In some situations, this background becomes visible. Why? The „culprit" is this „greyish“ rectangle behind your text boxes (in other words: The „culprit“ is the user, who defined this rectangle to behave as it does. ).

You set this rectangle to „Resize: responsive width and height" (proportional scaling). Just think: What happens, if you scale an image proportionally? Its hight shrinks and grows according to its width. Exactly that is it, what you told this rectangle to do! And this has one more crucial consequence:

Normally, a rectangle adapts the size of the elements placed „into“ it. It shrinks and grows according to these elements. If you tell the rectangle to scale proportionally, and you place a text box onto it – what should this poor rectangle do, when the textbox grows vertically: Should it grow vertically too (this would not be proportionally), or should it scale proportionally (in this case the text has to bleed outside).

• Solution: Select this greyish rectangle and set it to „Resize: Responsive Width“ or „Stretch to Browser Width“. Do this in every breakpoint!

2. „Text issue“:

Your text boxes „bleed“ outside the breakpoint boundaries when resizing the browser window. Why? Because you told them to do so! In some breakpoints your text boxes are set to „Resize: None“. So, what should they do, if you scale the browser window?

• Solution: Select all text boxes and set them to „Resize: Responsive Width“ in every breakpoint.

This should fix your issues. Just have a look at your modified .muse file: https://www.dropbox.com/s/yk9bmcgcc3y4d1v/rectangle%20spacing%20greenbg_Mod.muse?dl=0

There are some other, smaller issues on your site, but these don’t affect your questions. (For example: I’d define the blue rectangle at the bottom and the text/logo within as „Footer“)