Custom CSS for one breakpoint

Report · Feb 05, 2017

I'll explain first my end-goal because I believe it's something Muse doesn't do absent of custom CSS, but I'm actually more interested in actually applying overriding CSS for a single breakpoint just to have as part of my toolbox for the future.

The way horizontal scrollbars work in Muse has been a source of some frustration to me. My site has four breakpoints, the largest three I wish to keep fixed-width, because I use several scroll effects on the page. The smallest one though, which less people will see when maximized, I was willing to forgo the effects because I thought in making it fluid width, I would regain the horizontal scrollbar for that breakpoint, but it doesn't do that.

At the larger breakpoints, due to dynamic object widths and pinning of the page, I'm always happy with the presentation and that the user can always see all the content. But, at the smallest breakpoint, you're able to resize the window such that content disappears once the minimum page width is passed. It's in this one and only situation, that I'd like to have the windows horizontal scrollbars appear so at least the user can scroll over to access the rest.

I think this is not possible from within the Muse interface, but I know adding <style>body{overflow-x:scroll}</style> to an embedded HTML object will do the trick, but then it appears unnecessarily in the large breakpoints too. I thought if I could identify separate css classes that were being applied by Muse for each breakpoint, I could set overflow-x to just that smallest breakpoint, but the code Muse spits out doesn't appear to work like that, depending instead on recalculating everything each time the window is resized.

So, any solution to my problems would be appreciated, but I guess bonus kudos if breakpoint-specific CSS turns out to be a valid solution and how I might apply breakpoint-specific CSS now and maybe in the future. Thanks.

Anyone who wants to view my site as an example, please feel free, it currently has the Embedded HTML that re-applies the horizontal scrollbar to every breakpoint:

http://www.bullcityconsulting.net

Thank you.

Report · Feb 05, 2017

Instead of embedding the style in HTML on the page, use a media query placed into the HTML for <head> section of the master page properties. Set the max-width value to the value of the Muse breakpoint where you want the scroll to kick in (450px in the example).

Something to note is macOS (and possibly other configurations of OS/browser) can be set to hide scrollbars unless they're needed. This means that your horizontal content might not be obvious to people with this configuration. To counter this, you might want to add the following block of code inside the media query - you can change the appearance easily enough by tweaking the size and colour/opacity values:

::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); }

I hope this helps.

David

Creative Muse

Report · Feb 06, 2017

That's beautiful. Thanks David. I wasn't familiar with media queries or Muse's metadata section. Really appreciate the quick reaponse!

Adobe Community

Custom CSS for one breakpoint

1 Correct answer