• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Breakpoint issue

Participant ,
Aug 14, 2017 Aug 14, 2017

Copy link to clipboard

Copied

Although I've been using Muse for a couple of years now, I've been using it in a non-responsive way and now I'm now trying it in responsive mode, so forgive me, I'm still very much a novice when it comes to designing a responsive site.

I'm currently designing the Master page and have breakpoints at 768 and 320. I find I can reposition text and images at 768, but when I try to do the same at 320, I can't alter any of the elements. Instead my cursor turns into a pencil symbol.

I'm clearly doing something wrong. Can anyone advise me in idiot language where I'm going wrong and what I need to do to me able to alter/re-position elements at the 320 breakpoint.

Thanks!

Views

1.1K

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
community guidelines

correct answers 1 Correct answer

LEGEND , Nov 24, 2017 Nov 24, 2017

If you share the site, we surely will be able to check fix the issues. I am quite sure, that there are no muse glitches but design glitches.

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

Votes

Translate

Translate
LEGEND ,
Aug 14, 2017 Aug 14, 2017

Copy link to clipboard

Copied

Without seeing a screenshot or a link, you don`t need a breakpoint at 320 but set your page from 768 to fluid width breakpoint and a minimum width of 320.

For more and deeper views, we would need a screenshot or a simple, reduced to your issue, .muse.

Does this help?

Best Regards,

Uwe

Votes

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
community guidelines
LEGEND ,
Aug 14, 2017 Aug 14, 2017

Copy link to clipboard

Copied

You only can edit your document at breakpoints. Between the breakpoint you get this pencil symbol with the „forbidden“ icon.

The 320 px „breakpoint“ certainly is no breakpoint, but the minimal page width:

Screen.jpg

You may create a breakpoint at 320 px and reduce minimal page width at that breakpoint.. But what for? Do you know a device using a screen of 320 px or below?

Votes

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
community guidelines
Participant ,
Aug 14, 2017 Aug 14, 2017

Copy link to clipboard

Copied

Thanks for your responses - if you pardon the pun!

I think I get what I've done wrong. 320 was not set as a breakpoint, but as a minimum width. Would you be able to advise where a typical breakpoint should be for viewing a site on a phone?

Votes

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
community guidelines
LEGEND ,
Aug 14, 2017 Aug 14, 2017

Copy link to clipboard

Copied

Usually you don`t design for devices but for screen resolutions.

As you use responsive design, one usual breakpoint starts at 768 and is set to be a fluid width breakpoint.

Now you use your scrubber and if you feel the design starts to "break" you set a new breakpoint and replace your elements.

It is recommended not to use too many breakpoints. But to use one more breakpoint is not too bad, depending on your layout.

If you did "less is more" you won`t need any further breakpoint until the minimum width of 320 is reached with the scrubber.

Best Regards,

Uwe

Votes

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
community guidelines
Community Beginner ,
Aug 15, 2017 Aug 15, 2017

Copy link to clipboard

Copied

Thanks for this comment, im also struggling a little bit with the breakpoint concept

I designed a site www.naked-ears.com with as i understand now to many breakpoints, i thought you had to go with your scrubber throug the whole width of every page and create breakpoints whenever you got the chance and change the design at these breakpoints so that it would easily flow through different devices?

Now i still have that the site looks different on different mobile devices, and that i cannot get to an specific breakpoint for an specific device because im told that i cannot alter a breakpoint within 25 px of another. Then i want to get rid of a breakpoint but don's know how...

Do i understand it correct

you only have to use fluid with 320-....

and then i don't know at what pix to put the breakpoints foor i-pad, and all the different mobile phones so that the site looks good on every phone and i-pad? How do i do that ?

so at which width do i put my breakpoints?

Love to hear from you...

Thanks!

Votes

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
community guidelines
Adobe Employee ,
Aug 16, 2017 Aug 16, 2017

Copy link to clipboard

Copied

I think that you have misunderstood the concept behind responsive design.

There are a couple of ways in which you create new breakpoints.

- You start with a minimum size and then keep increasing the size of the browser to the point where the design breaks or starts looking bad. Then you create another breakpoint and adjust the layout.

- Alternatively, you create your website at the largest dimension, and then start scaling the browser down until the design breaks. At every such point, create a new breakpoint and recreate the layout best suited for that dimension.

Thanks,

Preran

Votes

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
community guidelines
Community Beginner ,
Nov 24, 2017 Nov 24, 2017

Copy link to clipboard

Copied

Hello Preran,

Thanks for your replay of some time ago...

"

- Alternatively, you create your website at the largest dimension, and then start scaling the browser down until the design breaks. At every such point, create a new breakpoint and recreate the layout best suited for that dimension."

What you mentioned above is what i did and i went with the scrubber from my maxim size to my smallest size as (i understand this can be 320-960 for a regular page?) and i saw many thing breaking an in need of new design, when i saw that i added a new breakpoint...up to the point of to many breakpoints...

Can i also use no breakpoints and only change the width's  for different divices?So that the site wil float with the size of the device?

Can you look at www.forfilling.com if i look at it on my phone the text's look strange but on the breakpoint for mobile devices i had it all looking good at that size  why do you think i don't see on my phone what i created in muse?And how can i be sure that what i create in muse is what i see and looks good at the different devices, and different phones

Love to hear from you thanks

Votes

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
community guidelines
LEGEND ,
Nov 24, 2017 Nov 24, 2017

Copy link to clipboard

Copied

If you share the site, we surely will be able to check fix the issues. I am quite sure, that there are no muse glitches but design glitches.

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

Votes

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
community guidelines
Community Beginner ,
Dec 01, 2017 Dec 01, 2017

Copy link to clipboard

Copied

Thanks for your replay here are the two sites i'm struggling with


albums naked ears    as you can see on this page if you look at it on a lab or desk top the players go over the text this is not what i saw in muse or preview, how can i get it so that what i design in muse is what i will see when i publish?


but when i watch it on different mobile phones i see things that arn't in the original design like text in the menu breaking on the homepage





The other site is


Home Forfilling  this one looks good on labtop / desktop but when i watch it on different mobile phones i see things that arn't in the original design like text going over each other on the homepage on some mobile phones it looks ok...how can i get this fixed?

Are there tutorials that explain how you get rid of breakpoints and how you can get your site looking good at different devices?

I hope you can see the problem by just looking at the sites on moblie and desktop because it seems complicated and a lot of work to follow the instructions link i'll have to study that first for some time before i can follow it (is there no faster simpeler way for me to help you help me?)

Looking forward to here from you and hope this is a thing you can solve by just looking at the links...

Thanks a lot

Votes

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
community guidelines
Community Beginner ,
Dec 01, 2017 Dec 01, 2017

Copy link to clipboard

Copied

www.naked-ears.com

www.forfilling.com

Votes

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
community guidelines
LEGEND ,
Dec 01, 2017 Dec 01, 2017

Copy link to clipboard

Copied

And again: Share these sample .muse files as already said.

Votes

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
community guidelines
Guest
Dec 01, 2017 Dec 01, 2017

Copy link to clipboard

Copied

While you are getting your muse file uploaded as per instructions to be evaluated, think about a few things for web.

Generally starting with mobile is a good design strategy. It forces you to put the most important content in a logical presentation. There will be less problems as you increase the layout size For responsive.

Your navigation is not in a very usable in the traditional sense/form. Not user friendly.

Votes

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
community guidelines
LEGEND ,
Dec 01, 2017 Dec 01, 2017

Copy link to clipboard

Copied

LATEST

In my opinion, „mobile first“ is a bad strategy for Muse, because you often need to add elements in wider breakpoints. Adding elements necessarily means to reposition these elements in all breakpoints, where they are needed.

If you start with the widest breakpoint, layout it and then add the „smaller“ breakpoints, the elements remain in their expected position.

Votes

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
community guidelines