Highlighted

Responsive widget on small devices not scaling properly

Community Beginner ,
Oct 11, 2017

Copy link to clipboard

Copied

Hi,

I'm currently working on a responsive website.

I'm having troubles when scaling on small devices, it adds an empty padding on the right of the page.

Here are the links of the 2 concerned pages:

https://dev.weedo.agency/moneytime

https://dev.weedo.agency/moneytime/contact.html

In the Homepage, I think this is the top page slideshow which do not fit exact width.

In the contact page, I think it comes from my contact form in the lightbox when clicking the button down on the page.

I tried everything to make it ok when scaling, but none of the trick works !

Hope someone can help me to find out ?

Thank you in advance !

Can't wait !

Meantime, I found a trick for my button to be centered:

Capture d’écran 2017-10-13 à 22.52.27.png

I made it full width and I only pinned the button inside the container.

It's going to work until the next release !

Thank you  

Views

252

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

Responsive widget on small devices not scaling properly

Community Beginner ,
Oct 11, 2017

Copy link to clipboard

Copied

Hi,

I'm currently working on a responsive website.

I'm having troubles when scaling on small devices, it adds an empty padding on the right of the page.

Here are the links of the 2 concerned pages:

https://dev.weedo.agency/moneytime

https://dev.weedo.agency/moneytime/contact.html

In the Homepage, I think this is the top page slideshow which do not fit exact width.

In the contact page, I think it comes from my contact form in the lightbox when clicking the button down on the page.

I tried everything to make it ok when scaling, but none of the trick works !

Hope someone can help me to find out ?

Thank you in advance !

Can't wait !

Meantime, I found a trick for my button to be centered:

Capture d’écran 2017-10-13 à 22.52.27.png

I made it full width and I only pinned the button inside the container.

It's going to work until the next release !

Thank you  

Views

253

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
Oct 11, 2017 0
Adobe Employee ,
Oct 12, 2017

Copy link to clipboard

Copied

I am viewing your site on an iPhone and I don't see any issues. Can  you provide us with more info on how we could reproduce your issue?

If you did something that resolved your issue, can you post the solution here for the benefit of other users?

Thanks,

Preran

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...
Oct 12, 2017 0
Community Beginner ,
Oct 12, 2017

Copy link to clipboard

Copied

The issues are still visible on my iphone and also when I inspect the page on browser.

Simply swip to the right of the page and you'll see that all "full width" elements are smaller than the total width.

There is a "blank" part on the right.

Can you see it ?

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...
Oct 12, 2017 0
LEGEND ,
Oct 12, 2017

Copy link to clipboard

Copied

This is a typical issue, if you have elements overlapping/positioned outside the breakpoint/page width.

Please try this:

  • In layout view, zoom out considerably to see whole page and wide parts of the canvas. Now perform a „Select All“ (cmd+A) and look, if elements are bleeding ouside your breakpoints. Check this in every breakpoint and on layout and master page.
  • Drag the scrubber (this grey vertical handle top right of the breakpoint bar) slowly inwards and have a look at your page elements. Do they overlap the breakpoint/page width during dragging?

Mobile browsers always try to display all elements of your page. Misplaced elements therefore often cause a zoomed in or shifted view.

If you don’t find an issue, test-wise delete all 3rd party widgets.

If your issue persists, reduce your site to only one typical page, only the affected breakpoints and try to delete as many elements as possible. Save this .muse file under a new name and let us have a look at it (–> Dropbox, Creative Cloud).

You may follow these instructions: https://forums.adobe.com/docs/DOC-8652

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...
Oct 12, 2017 1
Community Beginner ,
Oct 12, 2017

Copy link to clipboard

Copied

I don't have any elements overlapping the breakpoints, I really don't understand why I have this issues.. everything is set up to stay inside the breakpoints  

Here is the .muse file with the only breakpoint concerned (600px), if you can have a look at it: moneytimeTest.muse - Google Drive https://drive.google.com/a/rebatet.fr/file/d/0B2xXKeFG_VblbEl5akRxUWdYcUk/view?usp=sharing

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...
Oct 12, 2017 0
Adobe Community Professional ,
Oct 12, 2017

Copy link to clipboard

Copied

There´s something that needs some alignment, I guess.

Bildschirmfoto 2017-10-12 um 19.40.37.png

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...
Oct 12, 2017 0
LEGEND ,
Oct 12, 2017

Copy link to clipboard

Copied

„… I don‘t have any elements overlapping the breakpoints.“

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...
Oct 12, 2017 0
Adobe Community Professional ,
Oct 12, 2017

Copy link to clipboard

Copied

But to be honest, this overlapping element is "only" the lightbox element. This should normally not be a problem, should it?

But anyway, if I center the composition, this horizontal scrollbar disappears.

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...
Oct 12, 2017 0
LEGEND ,
Oct 12, 2017

Copy link to clipboard

Copied

The lightbox elements are not the culprit. I misinterpreted the screenshot.

Here the solutions:

• Horizontally shifting on „Homepage": Please unpin the „Prev“/„Next“ buttons and all works correctly.

Screen.jpg

• Horizontally shifting on „Contact“: Please unpin the „Formulaire de Contact“ button, and all works correctly.

Screen2.jpg

In the new versions of Muse, pinning behaviour has been modified. In most cases, pinning isn’t necessary at all in the newest Muse version.

Especially, if you are dealing with fixed width elements (like the 3 buttons mentioned above) on fluid pages, pinning may cause unexpected effects. Therefore first of all leave these elements unpinned.

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...
Oct 12, 2017 1
Community Beginner ,
Oct 13, 2017

Copy link to clipboard

Copied

Oh, I understand now.

Thank you for this information, I won't pin elements inside a composition ever again !

Homepage works correctly now   Except the previous & next buttons which are not properly positionned anymore.

Same thing for the "formulaire de contact" button, If I unpin it, it is not centered anymore inside the page

Do you have any trick to center them without pinning ?

Thank you very much to all of you for your 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...
Oct 13, 2017 0
Community Beginner ,
Oct 13, 2017

Copy link to clipboard

Copied

My apologies. In fact, I saw it, but as it starts at 350px, I guess the issue should start at 350px, but between 550px and 350px it is also affected..

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...
Oct 13, 2017 0
LEGEND ,
Oct 13, 2017

Copy link to clipboard

Copied

I’d wait, until the next public release of Muse will be available. I think, it is not that much time any more.

Usually at Adobe MAX new CC apps are introduced. And Adobe Max is next week wednesday .

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...
Oct 13, 2017 0
Community Beginner ,
Oct 13, 2017

Copy link to clipboard

Copied

Can't wait !

Meantime, I found a trick for my button to be centered:

Capture d’écran 2017-10-13 à 22.52.27.png

I made it full width and I only pinned the button inside the container.

It's going to work until the next release !

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...
Oct 13, 2017 0
LEGEND ,
Oct 13, 2017

Copy link to clipboard

Copied

Excellent idea!

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...
Oct 13, 2017 0