Major Responsiveness Issues - Page elements overlapping etc.

[David Lalor]

Hi all,

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!

Muse File: https://drive.google.com/file/d/1_WPoA2Nqm1HdFUApIPG_iZGb8iE_PgoF/view?usp=sharing

Desktop (no problems):

Tablet (some issues):

Mobile (worse issues):

[Günter Heißenbüttel]

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:

• The buttons „Learn More“ and „Get Started“. don’t stay centred. This may be fixed by unpinning them in every breakpoint.
• The button „Get Started“ on the master page may be easily centred, if you copy it at last „character" into the text frame „Take your band …“ (Fixed width elements sometimes react a little „stubborn in Muse’s responsive design.
• The first column of these 6 logos („Our Services“) are misplaced and need to be repositioned in breakpoint 450 px.
• The „hardest“ issue: The two spanning images bleed outside the breakpoint width, what definitely causes shifting issues on mobile devices. Please make sure that no element overlaps/bleeds outside the breakpoint width on master or layout page. Please check additionally, if elements are bleeding outside, when slowly dragging the scrubber (this grey vertical handle to the right of the breakpoint bar) inwards.

[fotoroeder]

Just because thenscreenshot was already made:

[Günter Heißenbüttel]

fotoroeder​: Can you see, the issues, the initial poster showed in his screenshots?​

[fotoroeder]

https://forums.adobe.com/people/G%C3%BCnter+Hei%C3%9Fenb%C3%BCttel  schrieb

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:

and here:

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".

Best Regards,

Uwe

[David Lalor]

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:

<style>
  html, body{
    width: 100%;
    overflow-x: hidden;
  }
</style>

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?

Live Website:

[fotoroeder]

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.

Adobe Creative Cloud​

Best Regards,

Uwe

[David Lalor]

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.

David

Error Message:

Muse Version:

[fotoroeder]

the same.

Have no idea about your issue, I must admit.

Uwe