Highlighted

Breakpoint settings adjustable?

Community Beginner ,
Nov 20, 2017

Copy link to clipboard

Copied

I'm trying to figure out the best break points to have and also if there is a way to set which break point loads...

I currently have a site with break points at 720 and 1000 and 1200 (there are others, but this will get us there for the question). My thinking was, a browser would load in the next break point below it, so a 1024w would load in the 1000 layout and a 768w would load in the 720 break. Instead, it seems to go the other way - they load in the 1200 and 1000 respectively, and "cut off" the right hand part of the layout without a scroll bar at the bottom.

A few factors: other than the 1200, all other breakpoints are fluid.

The biggest problem seems to be with embedded video.

Also - is there any way to copy and paste a "new" version of a graphic or widget, without changes happening across the entire site? I find myslef having to rebuild different sized widgets from scratch and then turning them off at other breakpoints.

The site is www.harkproductions.com

Any suggestions/tips would be helpful. Thanks.

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

You could leave the 320 in the pocket as there are no smaller devices than 320, so there´s nothing to "break".

Muse´s fluid responsiveness is meant to use breakpoints only if your design doesn`t fit anymore.

And as ayushrathi already wrote, start with the biggest breakpoint (which isn`t really a breakpoint, it´s only one design, right?) and use this grey scrubber on the top right corner of the breakpoint bar to watch out, where to place the first/next breakpoint if any.

It´s good practice to start with the master(s) for your global header(s) and footer(s).

It is quite common to need at least one breakpoint here, as in most cases the menu gets to big to fit into desktop and 320 (minimum width – no breakpoint).

Although it is no rule that the breakpoints have to be the same on master and their corresponding pages it could be useful to use the same breakpoints on pages than on the master – but it is not necessary.

You could easily stay with one breakpoint on master and might be needing one/two/three breakpoints on pages.

The breakpoints (1024/969/768) you were talking about are still in use when you stay with fixed width breakpoints in responsive design but also without 320 as a breakpoint, this should be the minimum width. BTW if it look s good on 320 it looks good on 360 as well (my opinion).

Try to use as little breakpoints as possible.

For one of the origin questions: most widgets are responsive with 2018, so  normally you won`t need to copy and paste widgets, hide them in breakpoints or in other breakpoints. The muse-video-widgets ( youtube/vimeo are responsive ) are responsive, for example.

Best Regards,

Uwe

Views

474

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

Breakpoint settings adjustable?

Community Beginner ,
Nov 20, 2017

Copy link to clipboard

Copied

I'm trying to figure out the best break points to have and also if there is a way to set which break point loads...

I currently have a site with break points at 720 and 1000 and 1200 (there are others, but this will get us there for the question). My thinking was, a browser would load in the next break point below it, so a 1024w would load in the 1000 layout and a 768w would load in the 720 break. Instead, it seems to go the other way - they load in the 1200 and 1000 respectively, and "cut off" the right hand part of the layout without a scroll bar at the bottom.

A few factors: other than the 1200, all other breakpoints are fluid.

The biggest problem seems to be with embedded video.

Also - is there any way to copy and paste a "new" version of a graphic or widget, without changes happening across the entire site? I find myslef having to rebuild different sized widgets from scratch and then turning them off at other breakpoints.

The site is www.harkproductions.com

Any suggestions/tips would be helpful. Thanks.

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

You could leave the 320 in the pocket as there are no smaller devices than 320, so there´s nothing to "break".

Muse´s fluid responsiveness is meant to use breakpoints only if your design doesn`t fit anymore.

And as ayushrathi already wrote, start with the biggest breakpoint (which isn`t really a breakpoint, it´s only one design, right?) and use this grey scrubber on the top right corner of the breakpoint bar to watch out, where to place the first/next breakpoint if any.

It´s good practice to start with the master(s) for your global header(s) and footer(s).

It is quite common to need at least one breakpoint here, as in most cases the menu gets to big to fit into desktop and 320 (minimum width – no breakpoint).

Although it is no rule that the breakpoints have to be the same on master and their corresponding pages it could be useful to use the same breakpoints on pages than on the master – but it is not necessary.

You could easily stay with one breakpoint on master and might be needing one/two/three breakpoints on pages.

The breakpoints (1024/969/768) you were talking about are still in use when you stay with fixed width breakpoints in responsive design but also without 320 as a breakpoint, this should be the minimum width. BTW if it look s good on 320 it looks good on 360 as well (my opinion).

Try to use as little breakpoints as possible.

For one of the origin questions: most widgets are responsive with 2018, so  normally you won`t need to copy and paste widgets, hide them in breakpoints or in other breakpoints. The muse-video-widgets ( youtube/vimeo are responsive ) are responsive, for example.

Best Regards,

Uwe

Views

475

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

Copy link to clipboard

Copied

Hi Jessariah67

Their is no way to set which breakpoints to be loaded. The next nearest breakpoint gets loaded by default.

Could you let us know which version of Muse are you using?

Also, When you have multiple breakpoints in a site and you try to add any graphics or a widget, then it will get added across all the breakpoints.

You can hide the graphics and widgets in other breakpoints by following steps :

1. Go to the breakpoint in which you want the widget to be displayed.

2. Right click on widget -> Click on Hide in other Breakpoints

Thanks and Regards

Ayush Rathi

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...
Nov 20, 2017 1
Community Beginner ,
Nov 20, 2017

Copy link to clipboard

Copied

Hi Ayush,

I'm using Muse 2018. So I guess the best thing to do is set break points at the most ? - 320, 360, 768 and 1024? Or is it better to just adjust breakpoints on a page-by-page basis, depending on layout?

Would doing them all as "fixed" give you the scroll bars?

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

Copy link to clipboard

Copied

It would be good if you initially design your site in one breakpoint and then add multiple breakpoints to your site.

You can try making all the breakpoints as fluid and check if the scroll bar appears.

Thanks and Regards

Ayush Rathi

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...
Nov 20, 2017 1
Adobe Community Professional ,
Nov 20, 2017

Copy link to clipboard

Copied

You could leave the 320 in the pocket as there are no smaller devices than 320, so there´s nothing to "break".

Muse´s fluid responsiveness is meant to use breakpoints only if your design doesn`t fit anymore.

And as ayushrathi already wrote, start with the biggest breakpoint (which isn`t really a breakpoint, it´s only one design, right?) and use this grey scrubber on the top right corner of the breakpoint bar to watch out, where to place the first/next breakpoint if any.

It´s good practice to start with the master(s) for your global header(s) and footer(s).

It is quite common to need at least one breakpoint here, as in most cases the menu gets to big to fit into desktop and 320 (minimum width – no breakpoint).

Although it is no rule that the breakpoints have to be the same on master and their corresponding pages it could be useful to use the same breakpoints on pages than on the master – but it is not necessary.

You could easily stay with one breakpoint on master and might be needing one/two/three breakpoints on pages.

The breakpoints (1024/969/768) you were talking about are still in use when you stay with fixed width breakpoints in responsive design but also without 320 as a breakpoint, this should be the minimum width. BTW if it look s good on 320 it looks good on 360 as well (my opinion).

Try to use as little breakpoints as possible.

For one of the origin questions: most widgets are responsive with 2018, so  normally you won`t need to copy and paste widgets, hide them in breakpoints or in other breakpoints. The muse-video-widgets ( youtube/vimeo are responsive ) are responsive, for example.

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...
Nov 20, 2017 0