2 people found this helpful
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
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.
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“)