1 Correct answer
I will answer this question in English, to give other members of this forum the possibility to follow.
Your problem is very clear! And it is also clear, that you are very new to web design! 
But step by step:
- Open the „Willkommen“ page in Muse and preview it in browser.
- Relative to your screen size, the 5 coloured elements bottom right of your page loose their alignment. The reason: There are many element above these 5 objects and Muse has to guess, which one should push down which other one – and i
12
Replies
I will answer this question in English, to give other members of this forum the possibility to follow.
Your problem is very clear! And it is also clear, that you are very new to web design! 
But step by step:
- Open the „Willkommen“ page in Muse and preview it in browser.
- Relative to your screen size, the 5 coloured elements bottom right of your page loose their alignment. The reason: There are many element above these 5 objects and Muse has to guess, which one should push down which other one – and it guesses wrong. You can help Muse by grouping the 5 square elements (Attention: Forget the text within these elements for now! We’ll come back to this later on. Just group the 5 squares. When you preview now in browser, you see: The squares keep their alignment.
- Now, you can see one more effect: If you minimise the browser window, the text box „Fühlen Sie sich wohl …“ reduces its width (because it is responsive) and grows in length, to „match“ the text length. Growing in length causes the 5 squares below to slide down dynamically.
Now you are confronted with the next problem:
The text pushes down the 5 squares, but the big image to the left shrinks! The size of responsive images is growing/shrinking proportionally, when the browser window is resized. That is the deeper sense of responsive layout.
In this special case you run into a contradictory situation:
- To the right, the text pushes the squares downwards, and
- to the left, the image reduces its size,
- Result: The image and the squares loose their alignment. This is logically unavoidable, and you can’t solve it by any means, except one: Create a fixed width page, without fluidity, and this will be possible without any problems. (I really don’t know, why beginners always try to start with complex responsive layouts – not really knowing, what they do. Just like somebody, who has no driving license but wants to take part in the Rallye Paris – Dakar )
Let us go further:
- The top „orange" background is an image frame created by using the crossed out rectangle tool from your toolbar. These image frames scale proportionally, because they are used to place images.
- Consequence: The elements, placed onto this frame (headline, menu) tend to run out of the area of this orange rectangle, when resizing the browser window, because the background shrinks and the text elements grow.
- Solution: Delete this image frame and replace it by a „normal“ rectangle (= the rectangle tool without crossed lines). Now the background grows, and keeps the elements within its area.
Next issues:
- You now see, that your menu isn’t shrinking, when you resize the browser window. It can’t do this because it is set to „Uniform Spacing“ instead of „Uniform Size“. If you want to know why, just read this: https://forums.adobe.com/thread/2370315
- On with the show: If you resize the browser window, the headline („Hauptsache …“) breaks at a certain point into 2 lines. What else should Muse do, when the text doesn’t fit into one line any more? Therefore make the text container as wide as possible, and at the point, where the line breaks, create a breakpoint and redesign the header area to make it fit. The same is necessary, when your menu entries start overlapping. Just learn, how to use breakpoints, and you can fix these issues!
The last issue:
- These text boxe covering the 5 coloured squares at the bottom of your page. In the meanwhile you should know, why the drift apart: The squares scale proportionally, the text boxes only vertically and need to give room for the text in vertical direction.
- With your actual Muse skills, you won’t definitely be able to solve this problem. But there is one way out: Create square images with this text and place these images into the coloured squares.
You see: The thread started with „Preview in a wrong screen size“ and end up in the simple fact, that you should really learn about responsive design, instead of using the Muse canvas just like a pin board.
Her you find a really great starting point for learning: https://helpx.adobe.com/de/support/muse.html
Glaubst du wirklich, du packst eine responsive Webseite mit dieden (Vor)Kenntnissen? Ich glaube es nicht!
Das meine ich:
Bitte, zeige Realismus, und erstelle eine Webseite mit festen Haltepunkten. So wird das nichts, glaub’ mir!
Natürlich schaffst du das!
Vergiss diesen halbgaren Quatsch, dass "Google responsive Seiten besser findet"!
Das ist einfach nicht wahr. Google beurteilt, ob Seiten auf mobilen Geräten gut zu nutzen sind (keine zu kleinen Schriften u.ä.). Aber das ist natürlich mit festen Breakpoint auch zu erreichen. Gute adaptive Seiten erreichen das gleiche Google-Ranking wie gute responsive Seiten – und ein besseres als miese responsive Seiten.
Und: Hauptkriterium für Google ist nach wie vor die Anzahl der Besucher deiner Seite. Ich würde mich durch das ständige Stirnrunzeln der selbsternannten Googe-Spezialisten nicht lähmen lassen! Glaub mir, feste Breakpoints sind einfacher handzuhaben und wesentlich einfacher zu gestalten – und eine gut gestaltete Seite, die sauber funktioniert, bringt mehr Besucher und ist letztlich 'Google-freundlicher". (Wobei ich selbst mich nicht so sehr um den Datenoloch Google schere. Aber das wäre ein anderes Thema …
Also: Sammle deine Erfahrungen mit Muse. Homepages sind nicht in Stein gemeißelt. Du kannst alles jederzeit ändern, wenn sich deine "Skills" entsprechend entwickelt haben!
AdChoices