Highlighted

Major Responsiveness Issues - Page elements overlapping etc.

Community Beginner ,
Jan 07, 2018

Copy link to clipboard

Copied

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):

Desktop.png

Tablet (some issues):

Tablet.png

Mobile (worse issues):

Mobile.png

Views

303

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Major Responsiveness Issues - Page elements overlapping etc.

Community Beginner ,
Jan 07, 2018

Copy link to clipboard

Copied

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):

Desktop.png

Tablet (some issues):

Tablet.png

Mobile (worse issues):

Mobile.png

Views

304

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 07, 2018 0
LEGEND ,
Jan 07, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 07, 2018 2
Adobe Community Professional ,
Jan 07, 2018

Copy link to clipboard

Copied

Just because thenscreenshot was already made:

Bildschirmfoto 2018-01-07 um 12.50.55.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 07, 2018 3
LEGEND ,
Jan 07, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 07, 2018 2
Adobe Community Professional ,
Jan 07, 2018

Copy link to clipboard

Copied

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:

Bildschirmfoto 2018-01-07 um 14.11.16.png

and here:

Bildschirmfoto 2018-01-07 um 14.13.53.png

while it should look more like this:

Bildschirmfoto 2018-01-07 um 14.16.36.png

Bildschirmfoto 2018-01-07 um 14.17.05.png

It is "just" an issue because of misplacing elements, I guess as it works fine, after placing those elements "correctly".

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 07, 2018 2
Community Beginner ,
Jan 09, 2018

Copy link to clipboard

Copied

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:

Screen Shot 2018-01-09 at 9.44.11 p.m..png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2018 0
Adobe Community Professional ,
Jan 09, 2018

Copy link to clipboard

Copied

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?

Bildschirmfoto 2018-01-09 um 23.38.59.png

Bildschirmfoto 2018-01-09 um 23.42.36.png

Bildschirmfoto 2018-01-09 um 23.43.15.png

So, there's a still some work and some decisions to be made.

Adobe Creative Cloud

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2018 2
Community Beginner ,
Jan 16, 2018

Copy link to clipboard

Copied

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:

Screen Shot 2018-01-16 at 8.48.00 p.m..png

Muse Version:

Screen Shot 2018-01-16 at 8.48.19 p.m..png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 16, 2018 0
Adobe Community Professional ,
Jan 16, 2018

Copy link to clipboard

Copied

Bildschirmfoto 2018-01-16 um 23.41.14.png

the same.

Have no idea about your issue, I must admit.

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 16, 2018 0