Highlighted

Full Width Slideshow in Muse 2018

Explorer ,
Oct 20, 2017

Copy link to clipboard

Copied

I have run into an issue with browser width slideshows in Muse 2018. Regardless of whether I use one of the built-in slideshow widgets, or one from Musethemes.com, for example, I get the same result. When previewing and scaling down the width of the browser (in this case between my 1200px and 960px breakpoints), I end up with horizontal scroll and white space to the right of the page.

Any other reports of this, or is it a non issue which is being worked on?

mjhart77​ I am hoping that there is a stable solution and Adobe will be able to come up with that.

In the meantime if you are facing major problem and if the website is live and want to get rid of the problem immediately,

here is my solution:

add this to your master page <head>  (Page > page properties > metadata)

<style>

body{

overflow-x:hidden; /*--for chrome and firefox -- */

}

html{

overflow-x:hidden; /*--for safari -- */

}

</style>

<style>

body{

overflow-x:hidden; /*--for chrome and firefox -- */

}

html{

overflow-x:hidden; /*--for safari -- */

}

</style>

hope this will solve the problem for the time being.

Toufic Nabi

Views

1.4K

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

Full Width Slideshow in Muse 2018

Explorer ,
Oct 20, 2017

Copy link to clipboard

Copied

I have run into an issue with browser width slideshows in Muse 2018. Regardless of whether I use one of the built-in slideshow widgets, or one from Musethemes.com, for example, I get the same result. When previewing and scaling down the width of the browser (in this case between my 1200px and 960px breakpoints), I end up with horizontal scroll and white space to the right of the page.

Any other reports of this, or is it a non issue which is being worked on?

mjhart77​ I am hoping that there is a stable solution and Adobe will be able to come up with that.

In the meantime if you are facing major problem and if the website is live and want to get rid of the problem immediately,

here is my solution:

add this to your master page <head>  (Page > page properties > metadata)

<style>

body{

overflow-x:hidden; /*--for chrome and firefox -- */

}

html{

overflow-x:hidden; /*--for safari -- */

}

</style>

<style>

body{

overflow-x:hidden; /*--for chrome and firefox -- */

}

html{

overflow-x:hidden; /*--for safari -- */

}

</style>

hope this will solve the problem for the time being.

Toufic Nabi

Views

1.4K

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

Copy link to clipboard

Copied

This should not be the case. Did you publish it somewhere like on BC for test purposes?

Share this link with us, so we can have a close look.

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 20, 2017 0
Explorer ,
Oct 20, 2017

Copy link to clipboard

Copied

Thanks. It's entirely likely this is just "operator error," but it keeps happening to me no matter how many times I start from scratch.

I put together a quick example of what I'm talking about and uploaded to BC...

Full Width Slideshow Example

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

Copy link to clipboard

Copied

Could you share this .muse with us?

Just this reduced version?

Thanks

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 20, 2017 0
Explorer ,
Oct 20, 2017

Copy link to clipboard

Copied

Okay, thanks so much. Again, it's probably something incredibly simple I'm just not seeing even though it's right in front of me.

Here's a link to the .muse file in Dropbox...

Dropbox - Oct20.muse

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

Copy link to clipboard

Copied

To be honest, I don`t have a clue what´s going on on your example site – means I am able to reproduce your issue completely but have no solution. There shouldn`t be a solution necessary as this is not a real big thing (thought till now).

Trying a completely new site with a slide show, I found it better to use a "responsive in width and height" slide show, instead od your approach "stretched to browser width".

The NEXT and PREV buttons behave, let´s say, strange. As soon as I place them in a different place, like you did, you have to pin them to the container of the slide show. They do not move as wanted, inside the slide show BUT if these two buttons stay outside the image they behave as wanted ans stay in conjunction with the images.

I didn`t realize this when trying slide shows in the prerelease.

These are 4 alternatives to look at, There might not be the solution for you but this has to be checked I guess.

I invite Sanjit_Das​ to this to have a look and of course ankushr40215001​ and Preran

to this.

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...
Oct 20, 2017 2
LEGEND ,
Oct 20, 2017

Copy link to clipboard

Copied

The scrollbar only appears, when the page is previewed in Safari. Chrome doesn’t show the scroll bar.

And If I replace your slideshow by a new one, configure it identically and import your images, all works fine.

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 20, 2017 1
Explorer ,
Oct 20, 2017

Copy link to clipboard

Copied

Thanks for taking the time to try and help me with this frustrating problem. The 4 options you came up with are greatly appreciated.

I've been messing around with the slideshow a bit more, and have discovered that (at least in Firefox... I haven't tested in other browsers as of yet), the problem appears when the slide transition is set to horizontal. When I have it set on "fade," the scrollbar and white space does not appear. I discovered this while trying to add bold caption overlay to each slide (which behaved similarly to the arrows). During the process I switched the transition to horizontal, and when I tried to backtrack to see if there was a specific action causing the horizontal scroll, it turned out to be the transition.

Hmm...

I'm not knowledgeable enough to get much beyond this point, but it seems like an issue within the widget that Adobe could easily fix, doesn't 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 20, 2017 0
LEGEND ,
Oct 20, 2017

Copy link to clipboard

Copied

You are definitely right!

The scroll bar is not present, if you set the slide show transition to „fade“.

I think, this issue is fixed for the actual slideshow widget in Muse 2018.0.

But obviously there seems to be a problem, when an older slide show is converted to the newest version.

What do you think ankushr40215001​?

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 20, 2017 1
Explorer ,
Oct 20, 2017

Copy link to clipboard

Copied

Gunter,

The problematic slideshow was created from scratch in the newest 2018 version with the "basic slideshow" widget. No issues with the fade transition, but as you affirmed, the horizontal transition doesn't want to cooperate (I haven't tried the vertical transition as of yet). There were a slew of bugs in the Aug 22 release, so I'm wondering if it's possible this one just slipped through the cracks?

Thanks for the assistance!

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

Copy link to clipboard

Copied

And again: You are completely right!

I tested it once again. And the error is triggered by the actual version of the slide show widget, when the transition is not set to „fade“. Please excuse my error!

I don’t think, this error was forgotten to be fixed. I think, simply nobody has noticed or reported it until now!

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 20, 2017 1
Explorer ,
Oct 20, 2017

Copy link to clipboard

Copied

For what it's worth, when I originally ran into this issue earlier today, I assumed it was something I was blindly overlooking. I tried inserting an older horizontal slider widget from musethemes.com at full browser width, and ran into the same problem with a horizontal scroll appearing.

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

Copy link to clipboard

Copied

Guenter and Uwe: Thank you for bringing this issue to our notice.

mjhart: Can you please send me your Adobe ID, location, and phone number over a private message? To send a private message, click my picture and use the Message button. We will get in touch with you for investigation. Ensure that your message also contains a URL to this post for reference.

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 20, 2017 1
Contributor ,
Oct 22, 2017

Copy link to clipboard

Copied

Hi Preran

I think I can identify the problem that is creating this horizontal scroll bar.

You see on the image-1

The slide of the slideshow has css of 1200px (breakpoint width) which is taking the extra space in the right side. Thus creating a horizontal scrollbar.

if I change this to 100% instead of 1200px the problem solves. (image-2).

Please let me know your thoughts, and If I am missing something.

Many Thanks

Toufic Nabi

Screenshot 2017-10-22 15.40.53.jpg

Screenshot 2017-10-22 15.41.27.jpg

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 22, 2017 1
Enthusiast ,
Oct 22, 2017

Copy link to clipboard

Copied

Toufic

I believe this is a typical behavior in Safari. This question came up, about the horizontal scroll bar, with a client a while back.

Check this site in Chrome then Safari. No scroll bar in Chrome or Firefox but it is there in Safari.

The Best Bed for Better Sleep | Casper®

You will see the scroll bar appear off and on. I forgot why. It might of been something to do with "off browser content". Safari shows you there is more.

Contrary to what you may have heard users do resize there browsers on desk/laptops. It won't be there on mobile. There still may be a fixable solution if it has to do with the horizontal-fade, etc. We will see what the Muse engineers respond with.

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 22, 2017 0
Contributor ,
Oct 22, 2017

Copy link to clipboard

Copied

Agree with you @HMAM

if the problem can be solved by changing transition style that would be great.

I was viewing the website in Chrome (Mac) and seen the problem and Found the unusual CSS in the inspector.

Toufic

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

Copy link to clipboard

Copied

I don`t get the horizontal scroll bar in Safari  Version 11.0 (12604.1.38.1.7) on OS X 10.12.6.

on the Casper website.

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 22, 2017 0
Enthusiast ,
Oct 22, 2017

Copy link to clipboard

Copied

It appears towards the smaller sizes...

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 22, 2017 0
Enthusiast ,
Oct 22, 2017

Copy link to clipboard

Copied

With the Wordpress sites there are certain sliders that do this. Muse does things in its own way so beyond my expertise...

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

Copy link to clipboard

Copied

HMAM  schrieb

It appears towards the smaller sizes...

I don`t get the horizontal scroll bar. At no size from 1900 to about 400 – like Safari let me shrink the browser window.

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 22, 2017 0
Explorer ,
Oct 22, 2017

Copy link to clipboard

Copied

Below is the synopsis of what I forwarded along to Preran. You can "fix" the issue by keeping the transition setting at the default "fade," but hopefully a true solution/update can be found...

1. Create a new site in the 2018 release of Muse.

2. Set the max page width to 1200px (fluid).

3. On the “home” page, drop the “Basic Slideshow” widget. Place the slideshow at the top of the page (Y position=0).

4. Select the hero image and set the resize value to “stretch to browser width”

At this point, if you preview in Chrome, Safari, or Firefox, everything appears to work normally with the default transition setting of “fade.”

5. Click the blue arrow on the slideshow widget, and change the transition effect from the default “fade,” to either “horizontal” or “vertical.”

Go ahead and preview the site in browser. If your browser width is greater than 1200px, once again everything appears normal.

6. Resize your browser width in either Firefox or Safari, and once you get below a width of 1200px, a horizontal scroll appears, and if you scroll over to the right you’ll notice white space (the image no longer stretches to the width of the browser). The further you downsize the browser window, the larger the white space gets.

Note I: The Chrome browser still appears to display the slideshow normally, regardless of which slide transition setting is used.

Note II: The same problem arises in the iOS version of Safari when the slide transition is set to horizontal or vertical.

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 22, 2017 0
Contributor ,
Oct 22, 2017

Copy link to clipboard

Copied

mjhart77​ I am hoping that there is a stable solution and Adobe will be able to come up with that.

In the meantime if you are facing major problem and if the website is live and want to get rid of the problem immediately,

here is my solution:

add this to your master page <head>  (Page > page properties > metadata)

<style>

body{

overflow-x:hidden; /*--for chrome and firefox -- */

}

html{

overflow-x:hidden; /*--for safari -- */

}

</style>

<style>

body{

overflow-x:hidden; /*--for chrome and firefox -- */

}

html{

overflow-x:hidden; /*--for safari -- */

}

</style>

hope this will solve the problem for the time being.

Toufic Nabi

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 22, 2017 3
Explorer ,
Oct 22, 2017

Copy link to clipboard

Copied

Thanks Touficnabi-- I'll give this a try. Luckily, I'm still in the early stages of piecing together the site, so it's not impacting something I've already published.

I wonder, however, what the impact of this is on third-party slideshow/slider widgets? When I first stumbled onto this issue a couple of days ago, I assumed there must have been something simple that I was just overlooking. I tried a slider widget from musethemes.com (which had a horizontal transition between slides), and had the same result. If the third-party firms that collaborate with Adobe are being impacted, I would thing the Muse team would try to get a quick fix in place ASAP. As your solution indicates,  it's likely just a matter of a line or two of code that needs to be updated within the Muse framework.

Thanks again!

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 22, 2017 0
Contributor ,
Oct 22, 2017

Copy link to clipboard

Copied

True, the issue is simple, thus the solution.

Though, I don't recommend relying on third-party widget initially (if not must) in a muse website. As a widget provider in the community, I know there are lot of parameters that third-party widget providers fail to meet.

Where as adobe poses the full potential to come up with solution for almost every problem. and I'm sure they will do it.

Toufic

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 22, 2017 1
Participant ,
Oct 29, 2017

Copy link to clipboard

Copied

I don't believe this is just involving slide shows. I have reported the same thing as long ago as last year:

100% Width & Scrollbar Bug?

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 29, 2017 0