Highlighted

Footer isn't pushed down by content in one breakpoint

Participant ,
Aug 24, 2018

Copy link to clipboard

Copied

I have a problem with my smallest breakpoint (900), the footer isn't being pushed down, when the browser is resized lower than 900.  So when closer to 380 in the browser, the footer overlaps the content.  It is working as expected with all other breakpoints, just the lowest has the problem. 

1-footerdesign.png

Here, when previewed in the browser, it looks as expected. 

2.preview.png

But when I shift the bowser window to a smaller size, the footer isn't being pushed down, but instead over the content.

This is the problem:

3.overlap.png

In Muse, I test it by resizing in Muse's preview, and it doesn't act this way (it doesn't overlap).  

I've tested this in Firefox and Chrome, and it overlaps just like it does in Safari.

Sometimes Muse has issues with fixed width elements on responsive pages.

You can fix the issue in this way:

  • Go to the master page.
  • Select the menu composition trigger and set it to „Resize: Responsive Width"
  • Select the image within the trigger and set it to „Resize: None“ or "Resize: Responsive Width and Height“.

Views

626

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

Footer isn't pushed down by content in one breakpoint

Participant ,
Aug 24, 2018

Copy link to clipboard

Copied

I have a problem with my smallest breakpoint (900), the footer isn't being pushed down, when the browser is resized lower than 900.  So when closer to 380 in the browser, the footer overlaps the content.  It is working as expected with all other breakpoints, just the lowest has the problem. 

1-footerdesign.png

Here, when previewed in the browser, it looks as expected. 

2.preview.png

But when I shift the bowser window to a smaller size, the footer isn't being pushed down, but instead over the content.

This is the problem:

3.overlap.png

In Muse, I test it by resizing in Muse's preview, and it doesn't act this way (it doesn't overlap).  

I've tested this in Firefox and Chrome, and it overlaps just like it does in Safari.

Sometimes Muse has issues with fixed width elements on responsive pages.

You can fix the issue in this way:

  • Go to the master page.
  • Select the menu composition trigger and set it to „Resize: Responsive Width"
  • Select the image within the trigger and set it to „Resize: None“ or "Resize: Responsive Width and Height“.

Views

627

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
Aug 24, 2018 0
Participant ,
Aug 25, 2018

Copy link to clipboard

Copied

I posted a temporary test here, if someone can look at and think of what might be causing this. 

Home 

Any ideas? 

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...
Aug 25, 2018 0
Participant ,
Aug 25, 2018

Copy link to clipboard

Copied

One interesting thing I noticed.  When I remove the mobile menu, I no longer get this problem. So I think the mobile menu is the culprit here, but I don't know why it would make it do this. 

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...
Aug 25, 2018 0
LEGEND ,
Aug 25, 2018

Copy link to clipboard

Copied

Is this mobile menu a 3rd party widget?

  • If yes, there will be probably no way to fix the issue. The widget in this case conflicts with Muse code.
  • If no: Could you please delete all pages except the „Home“ page, save this small document as a new .muse file, upload it to Dropbox, CC Files or a similar file sharing service and post the download link here? Then we will have a closer look.

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...
Aug 25, 2018 0
Participant ,
Aug 25, 2018

Copy link to clipboard

Copied

The mobile menu is made with Composition-Blank widget that comes with Muse.  Right now, to fix my issue, I hide the footer at this breakpoint.  That's not great, but it works. I would like to know what the issue is for future projects.

I can upload, but I don't want to share the link here. Is there another way? 

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...
Aug 25, 2018 0
Participant ,
Aug 25, 2018

Copy link to clipboard

Copied

Hi there, 

Actually I'm fine with sharing a stripped down version of the site. You can see that the problem persist on the lowest breakpoint.  You can download it here to have a look:

Dropbox - test.muse.zip

Thanks for the help!

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...
Aug 25, 2018 0
LEGEND ,
Aug 25, 2018

Copy link to clipboard

Copied

Sometimes Muse has issues with fixed width elements on responsive pages.

You can fix the issue in this way:

  • Go to the master page.
  • Select the menu composition trigger and set it to „Resize: Responsive Width"
  • Select the image within the trigger and set it to „Resize: None“ or "Resize: Responsive Width and Height“.

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...
Aug 25, 2018 1
Participant ,
Aug 26, 2018

Copy link to clipboard

Copied

Yes, that worked! Thank you!

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...
Aug 26, 2018 0