Muse Text Position changing

[Reksio666]

Hello,

text changes position when in preview, I designed text position for all the breakpoints with individual size etc. and when in preview its always lower than in the design, no pinning is present, the project is quite simple and I just cant find where is my fault in this? any ideas? Screens attached, how it looks in muse then how it looks in the browser... 

[Günter Heißenbüttel]

Thid shouldn’t be that difficult to fix.

Could you delete all pages except the one, of your screenshots, save this .muse document under a new name and upload it to Dropbox or a similar file sharing server? When you post the download linbk here, we can have a close look.

[Reksio666]

sure! thanks, lucky for you whole website is just one page hehe 🙂

here is wetransfer download link: https://we.tl/t-rtmHZjVO0Q

thanks for helping me!

[Günter Heißenbüttel]

It is nice, what people, who aren’t involved that deep in web design, think is easy! 🙂

Your site is all but easy! Why? Because your layout places elements, which are scaling differently, horizontally side by side

Just one example: The text box ("Lucas Kowalski …") is placed to the left of an image. What happens, if you resize the browser window?

The text box is growing vertically to keep the text visible and the image is scaling proprtionally smaller in relation to the browser width. This is the reason, why your layout fall into pieces.

It would be much easier, if your layout is orintated vertically, not horizontally.

The same thing happens, when text is placed onto an image, the image scales proportionally down and the text bow grows vertically, when the browser window is resized. This can be addressed by using "guiding frames" and breakpoints (see the attached screencast) but it makes layout really difficult.

The main finding: Designing for print is static (the page size doesn’t change), designing for the weg is dynamic: Every element interferes with others, especially when the browser window is resized.

In addition, it is very important to tell Muse which element is supposed to interfere with which other element.

Here you find some essentials to achieve synchorous behaviour of different elements:

Please have a look at this .muse file. I modified your file (very quick and dirty) to show you, how to proceed. The rest has to be handled by breakpoints. But, believe me, it will be quite hard, if you want to maintain this side-by-side layout.

[Reksio666]

thank you very much! it help a little in some breakpoints but it still looks bad in the smallest one 480px and few glitches in other, see screenshot, could you please look into it last time? https://we.tl/t-doCsNOa46C i tried placing reference box in other areas too, but no change

[Günter Heißenbüttel]

Don’t understand what you are trying to say. This is exact the issue I tried to describe in my last post: The text boxes grow vertically and push down the elements underneath, the images scale proportionally and become smaller, so your layout necessarily falls apart:

And:

• You didn’t group the elements in the correct way. Have a second look at the screencast of my last post!
• Your footer isn’t created correctly. Look at the footer/end of page values. And be aware that the page length is dynamic. If you choose a very small length value, it will adapt to the needed length automatically. Additionally, don’t use the footer image, because it scales proportionally (as alread said) Use a vertically scaling rectangle with an image fill (as I did in my sample file).

Here you find a slightly corrected version of your file: https://www.dropbox.com/s/9ys4b8b8c458361/4.3_Mod%20%281%29.muse?dl=1

To compensate the different scaling text/image you have to work with breakpoints or use the text as an image (SVG) to make it scale the same way as the images do. In this case the text becomes too small at smaller breakpoints. So, it is, as I said: Don’t create a text-image-side-by-side" layout. This is, according to physical rules, only possible with very deep Muse (or coding) skills. Re-create your site with vertically placed elements, and you will not run into these design issues.

[Reksio666]

sorry for that, I'm really new to Muse and website design and was in a rush and didn't read your message properly! thanks for all the time and help I used your advice and converted text to SVG as it seemed as the fastest and most reliable way to go 🙂 everything looks fine now and works in all screen resolutions. Have a nice day Sir!

[Günter Heißenbüttel]

Thank you!

If you are using SVG text don’t forget to copy your "real" text into the "Alternte Text" field for SEO reasons: Right click onto the image –> "Edit Image Properties"