I am having a big issue with responsiveness on a project that I am currently working on in Adobe Muse.
As I re-size the page, elements begin to overlap each other and behave strangely. I am a beginner with Muse so it may be something simple that I am missing.
I have attached some screenshots, as well as the .muse file. The screenshots just show one particular example of the problem on the homepage, but this is happening all over the site.
Any help would be greatly appreciated!
Desktop (no problems):
Tablet (some issues):
Mobile (worse issues):
Did you change something on your site?
The issues, you are describing and documenting in your screenshots, don’t show up here (iMac, iPad) at all.
There are some other issues, but they are quite easy to resolve:
Just because thenscreenshot was already made:
fotoroeder : Can you see, the issues, the initial poster showed in his screenshots?
To be honest Günter Heißenbüttel, no. I also assume, that we see an already "repaired" file. Except the elements bleeding outside the canvas.
I can only add, that I would set the elements to behave non resizing, as well graphic elements and text as they get resized in breakpoints anyway.
But it gets really messed up in mobile breakpoint at 450:
while it should look more like this:
It is "just" an issue because of misplacing elements, I guess as it works fine, after placing those elements "correctly".
Thanks for the replies guys!
Günter Heißenbüttel I haven't changed anything on the site, but I believe the issue may have something to do with me updating my Muse CC software. The live site is available to view at www.virramarketing.com (screenshot below as well). I last uploaded the files to the host server in June (when I would have been using an earlier version of Muse CC) and it doesn't suffer from any of these issues, so my guess is that the file somehow got messed up due to recent updates?
In regard to the images bleeding outside the breakpoint, I came up with a fix for that a while back whereby I add the following code to each of the exported HTML files, which serves to hide any bleed/overflow:
fotoroeder I am wondering how you managed to get the mobile layout fixed up (as shown in your last two screenshots)? Might it be possible to share the updated .muse file with me?
Let's see .
You should be aware, that I was not able to "repair" the whole page. It just looks fine now in breakpoints but not, using the scrubber between the breakpoints,
I recommend to change the image settings to reize in width only and not in width and height.
This, because your typo moves unpredictable referring to the image. Text always behaves different from images.
You could either change the image resizing or change your typo to an image – I recommend to change image setting as typo could get
weird when it gets resized.
I also deleted a grey rectangle "under" the hero image. What was that for?
So, there's a still some work and some decisions to be made.
fotoroeder Unfortunately, I am getting an error message (shown below) when I try to open the updated file that you sent. I thought that I had the latest version of Muse installed (screenshot below), but maybe I haven't... What version are you using yourself?
I have been messing around with the responsive settings on the text and I will post soon with my progress to see if any further changes need to be made.
In regard to the grey rectangle underneath the hero image, that was actually meant to be used on top of the image as a dark semi-transparent overlay in order to make the overlying text stand out more (just like the hero image further down the page). In haste, I must have left the rectangle underneath in the version that I posted here.
Have no idea about your issue, I must admit.