Highlighted

Gap on the right border when reducing browser size

Explorer ,
Feb 27, 2018

Copy link to clipboard

Copied

I'm having some trouble with full browser width content. After expanding it it appears fitting perfect into the full frame.
But when the browser window is reduced there appears a scroll bar on the bottom. When scrolling to the right there is a gap at the border.

( I'm working on a fixed breakepoint layout to apply some scroll effects.)

I have been looking for some solutions but have'nt found a right one yet.

Views

477

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

Gap on the right border when reducing browser size

Explorer ,
Feb 27, 2018

Copy link to clipboard

Copied

I'm having some trouble with full browser width content. After expanding it it appears fitting perfect into the full frame.
But when the browser window is reduced there appears a scroll bar on the bottom. When scrolling to the right there is a gap at the border.

( I'm working on a fixed breakepoint layout to apply some scroll effects.)

I have been looking for some solutions but have'nt found a right one yet.

Views

478

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
Feb 27, 2018 0
Adobe Community Professional ,
Feb 27, 2018

Copy link to clipboard

Copied

If you use a fixed width layout you have to respect the guides:

Bildschirmfoto 2018-02-28 um 08.14.39.png

Elements can only be stretched to browser width (latte macchiato-brown) or should not be placed in the red area of the canvas.

This rule is relevant for all breakpoints as long as you use fixed width breakpoints.

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...
Feb 27, 2018 2
Explorer ,
Feb 28, 2018

Copy link to clipboard

Copied

Hi Fotoroeder, thanx for your replay!

You are right, i have placed some elements past the limits of the browser width.
If i don't place them a bit wider they don't expand the whole way on a big screen.

I'm using an iMac 27" and i'm trying to fix it for that kind of size too.

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...
Feb 28, 2018 0
LEGEND ,
Feb 28, 2018

Copy link to clipboard

Copied

Please read this document thoroughly: https://forums.adobe.com/docs/DOC-8953

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...
Feb 28, 2018 2
Explorer ,
Feb 28, 2018

Copy link to clipboard

Copied

Hi Günter H.!

You have allways great advices.

Thanxs a bunch!

I will check out all that useful stuff

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...
Feb 28, 2018 0
Explorer ,
Feb 28, 2018

Copy link to clipboard

Copied

Ok, i have gone through all the points mentioned by and .

I now see that the problem is caused by a Tooltip Composition that i'm streching across the browser.

Staying inside the limits of the browser in Muse and without the widget everything is fine.

But activating the Tooltip widget i still get gaps.

I've tried out several width sizes but they have all gaps.
I've also tried with the widget adjustable in width, but it also doesn't fix the issue.

Is there any possibility to integrate the Tooltip Composition as full width without generating any gap?
Or are there some better options to place full width image slides with also changing text?

Thanx in advance!

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...
Feb 28, 2018 0
Explorer ,
Feb 28, 2018

Copy link to clipboard

Copied

I don't know if I'm failing heavily or what to think about Muse.

It looks like that I'm making some progress and after solving some issues things that were ok before start to behave weird.

I have replaced the Tooltip Composition with a Slideshow Widget with Captions. This works now fine.

But now the elements that are animated when scrolling (reason that forces to work with a fixed breakepoint layout) start to move shaky and jumping out of place.

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...
Feb 28, 2018 0
Adobe Community Professional ,
Feb 28, 2018

Copy link to clipboard

Copied

Show us a .muse with just this page and its jumping and shaky elements.

Please delete all other pages – save it with a new name into your Creative Cloud Files and by reight clicking this .muse, share that link with us.

We will have a look at it.

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...
Feb 28, 2018 1
Explorer ,
Mar 01, 2018

Copy link to clipboard

Copied

Good morning Uwe,

here is the link: Adobe Creative Cloud

The two animated groups are directly below the hero image.

The idea is that they slide sideways horizontaly without any shake and/or jump.

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...
Mar 01, 2018 0
Adobe Community Professional ,
Mar 01, 2018

Copy link to clipboard

Copied

You designed it for 2400 px width with no responsiveness at all , no breakpoints .

I use a 21,7" iMac. I don`t know, if all of your users out there in Tenerife use 27" iMacs only? Or large HP Displays?

The scroll motion effect however works fine on my small computer.

What I do not understand is that footer element (right hand side upper corner – footer checked):

Bildschirmfoto 2018-03-01 um 10.31.58.png

Well, let´s see, what happens when you changed some layout-issues (really 2400 px width? I know Germany is a great country, but …)

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...
Mar 01, 2018 0
Explorer ,
Mar 01, 2018

Copy link to clipboard

Copied

Hi Uwe, thanx for your reply.

To make it good looking on all kind of devices, bigger screens included, what sizes would you recommend?

Of course there aren't more breakpoints, this is just the starting.

More than focusing on how many users have bigger screens in what areas of the planet, or if there are multiple breakpoints for making it responsive, the issue is to solve the shaky-jumpy behaviour of the mentioned elements.

(Because of innecesarry additional comments is why many users don't like to share there failing projects in developing phase.)

But thank you sincerly for every constructive good advice.

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...
Mar 01, 2018 0
Explorer ,
Mar 01, 2018

Copy link to clipboard

Copied

I've uploaded a new file with a few more breakpoints.

On my second screen

( VA2012w 51 cm / 20" WIDE-SCREEN LCD WITH 8MS CLEARMOTIV™ - LED Display - Products - ViewSonic  )

the behaviour of the animated elements keep beeing a bit shaky-jumpy.

Can this jumpiness be avoided on bigger screens, and how can this be fixed on smaller desktop screen sizes?

Link to shared folder: Adobe Creative Cloud

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...
Mar 01, 2018 0
Adobe Community Professional ,
Mar 01, 2018

Copy link to clipboard

Copied

For me, on my screen your scroll motion elements work as expected. No jumping and shaking.

I cannot reproduce your issue.

"Normal" design starts from 1200 across 960 towards 768 with a minimum width of 320.

People out there also expand their pages to 1400 or 1600 in rare situations.

In your case the image is stretched to browser width anyway and will look fine on all screens.

In your case this could be done so far with fixed width breakpoints. "My" numbers are just numbers that are used in common sense but thinking responsive it is not so much a strict rule to follow but a possibility to show up.

I find my hint with the totally wrong placed pencils on top of your layout, as a footer element not unnecessary at all

This could, on your machine, be the reason for shaking appearance of your scroll motion elements. On my machine there´s no shaking.

In your case, it is very important to have everything mentioned in order to create a satisfying website, isn`t it?

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...
Mar 01, 2018 2
Explorer ,
Mar 01, 2018

Copy link to clipboard

Copied

Hi Uwe, you're right.

The image of the pencils was missplaced in the "to fast" reordering process.

I've added a 3rd version with only 1200px breakpoint.

It looks perfect on the iMac

But the jaggy behaviour is still there. Some slides are ok, but not every scroll is a smooth animation.

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...
Mar 01, 2018 0
Adobe Community Professional ,
Mar 01, 2018

Copy link to clipboard

Copied

I just did not get your post with the following files. Although my post came after your post, I just missed your post.

Now I check "Example 3"?

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...
Mar 01, 2018 1
Adobe Community Professional ,
Mar 01, 2018

Copy link to clipboard

Copied

Do we talk about these elements?

[Screenshot deleted by moderator]

Works fluently. No shaking at all.

The pencils are placed much better now .

I´m afraid, you´ll have to live with that. Working on my site at the moment, using same scroll motion effects, I hope, only people with fine screens and fast connection and up to date browsers watch it .

You grouped those three badges (Colegio,Kinder, Contacto) – maybe it works better ungrouped? You could then even do some more chichi and let them come in with different speeds?

I used this scrollmotion as well here BTW: organisation  (the figure on top of the submenu moves, scrolling down)

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...
Mar 01, 2018 2
Explorer ,
Mar 01, 2018

Copy link to clipboard

Copied

Hi Uwe,

your site looks great!

Love that scrolling animation on the nav bar.

[Screenshot deleted by moderator]

I will try out your advice with ungrouped elements.

Kind regards!

Jorge

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...
Mar 01, 2018 0
Adobe Community Professional ,
Mar 01, 2018

Copy link to clipboard

Copied

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...
Mar 01, 2018 0
Explorer ,
Mar 01, 2018

Copy link to clipboard

Copied

Hi Uwe, i have acted in an impulsive manner.

I have reported your comment with the screenshot showing the companys name as abusive because of privacy.

I have tried to delete the screenshot i added in my comment in reference to your site but that option its currently unavailable.

I hope we get free access again to our comments editing options and that we both delete the unnecessary added 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...
Mar 01, 2018 0
Adobe Community Professional ,
Mar 01, 2018

Copy link to clipboard

Copied

What happened?

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...
Mar 01, 2018 0
Explorer ,
Mar 01, 2018

Copy link to clipboard

Copied

I know i have done a step to early. My fault.

I should have asked you first to please remove the image showing the company name. Ok, we learn this lesson too.

Nothing that is going to cause immense trouble. A bit of patience and for sure we will get access again to our comments editing tool and proceed to delete the included images in our posts numbered 15 and 16.

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...
Mar 01, 2018 0
Adobe Community Professional ,
Mar 01, 2018

Copy link to clipboard

Copied

There´s no problem on my side with the screenshots.

I still have access to comments.

Same question – What´s up?

No reason to delete anything. From my side.

Kind Regards,

Uwe

P.S. Please moderator, could you give me some insights on this?

THX in advance

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...
Mar 01, 2018 0
Explorer ,
Mar 01, 2018

Copy link to clipboard

Copied

I consider appropiate to delete the screenshots on post 15 and 16.
And to delete all the posts from 18 to the end.

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...
Mar 01, 2018 0
LEGEND ,
Mar 01, 2018

Copy link to clipboard

Copied

Following your wishes: Screenshots deleted.

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...
Mar 01, 2018 1
Explorer ,
Mar 01, 2018

Copy link to clipboard

Copied

I have ungrouped the elements and applied scroll effects to every one individually,

but the jumpyness is still visible.

----------------------------------------------------------------------------

Tested on:

Firefox

Chrome

Opera

Safari

On medium screens the issue is some scrolls very noticeable,

other ones slight but perceivable enough to interfer in a pleasent user experience.


On big screens it's a tremendous schow-jumping.

----------------------------------------------------------------------------

I have found this post,... it's nearly 2 years old.

Muse CC 2015.2 Scrolling objects 'jumping' or bouncing slightly?

Mayb i'm not that wrong when i say the elements are jumping.

If there isn't any solution for it yet it would be cool if we could get that info. It makes the whole product more trustworthy.

I love Muse each step that i learn a new solution, clear information in the process is key to have a succesful customer experience.

Kind regards,

Jorge

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...
Mar 01, 2018 0
Explorer ,
Mar 02, 2018

Copy link to clipboard

Copied

Seems to be the way to go to avoid jumping, jaggy scrolls...

jQuery and Adobe Muse

https://goo.gl/XVojtA

jQuery Inserter

https://goo.gl/EMC7NG

Happy Museing!

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...
Mar 02, 2018 0