Copy link to clipboard
Copied
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!
Not sure, what your issue is – or better: Your „issue“ isn’t an issue at all.
First of all:
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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,
Copy link to clipboard
Copied
Not sure, what your issue is – or better: Your „issue“ isn’t an issue at all.
First of all:
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).
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?
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“)