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

Fixed breakpoint not scaling correctly on phone

Guest
May 17, 2017 May 17, 2017

Copy link to clipboard

Copied

I'm doing a website with fixed breakpoints at 1200, 1000, and 768.  My 1000 breakpoints look great on my iPad mini in both portrait and landscape.  On my iPhone 6 the page loads wide (using the 768 layout).  If I pinch the page, THEN it works great but you can't depend that visitors are going to do that.

My test site is: www.songseeds.com/test

Anything I can do to get this to load with the correct scaling?

thanks much

songseeds

Views

1.5K

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 , May 19, 2017 May 19, 2017

Here the attempt(!) of a very simplified answer:

You have a site with fixed width breakpoints. The code of your site and the browser decide, which breakpoint will be displayed at which browser width. At a given browser width normally the nearest smaller (or equal) breakpoint will be chosen.

For example: If your browser window has a width of 1300 px, not the 1400 breakpoint will be displayed, but the 1200 px breakpoint – with an empty space (or visible browser background) of 50 px to the left and t

...

Votes

Translate

Translate
LEGEND ,
May 17, 2017 May 17, 2017

Copy link to clipboard

Copied

I think, it is a layout issue. Could you share your .muse file (via Dropbox or a similar file sharing service), so we can have a closer look?

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
May 17, 2017 May 17, 2017

Copy link to clipboard

Copied

Yes.  The .muse file is on google drive:

songseeds3.1.muse - Google Drive

thank you

songseeds

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
Guide ,
May 17, 2017 May 17, 2017

Copy link to clipboard

Copied

1) When creating a site, you need to use a fixed width value. You have a fluid one - this is the main reason.

2) 1000 pixels breakpoint is not justified. Instead, create a 1024 breakpoint. This will cover 90% of the tablets and 100% of smartphones.

3) Never use system fonts. Use only web fonts or standard fonts.

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
May 18, 2017 May 18, 2017

Copy link to clipboard

Copied

1) In my site properties I changed it from fluid to fixed

2) Changed 1000px breakpoint to 1024px

3) I changed all my fonts to web fonts.

I'm still having the problem on my iPhone 6.  It still loads wide.

Since I've made changes, here is an updated .muse file.

songseeds3.2.muse - Google Drive

Baffling! 

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
Guide ,
May 18, 2017 May 18, 2017

Copy link to clipboard

Copied

1) In my site properties I changed it from fluid to fixed

Not so simple. You need to create a new project with a fixed width and transfer everything to it. Correcting the settings does not work.

Turn pinning off at breakpoints 1024 or less. This leads to unpredictable consequences on mobile devices. This is especially critical for Apple.

5116111032.png

Does not apply to the problem, just for what would you know:

This is the image frame. Usually it should be inserted images, and not used as a fill. Anyway, on your site I do not see any reason to use it as fill. You are losing opportunities for SEO.

3f3838cbfe.png

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
May 18, 2017 May 18, 2017

Copy link to clipboard

Copied

Hi Günter,

I have used Pavel's recommendations and thus have updated my .muse file.

songseeds3.2.muse - Google Drive

thanks

songseeds

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 ,
May 18, 2017 May 18, 2017

Copy link to clipboard

Copied

I'll have a look tomorrow!

Could you please make sure, that no object is placed outside/is overlapping your breakpoint width? Mobile browsers will try to display all elements. If they are outside the defined width, the vpage view will be zoomed out, until all element are visible.

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
May 18, 2017 May 18, 2017

Copy link to clipboard

Copied

OK, good advice.  I'll take a close look.  If I find anything I'll update the .muse file and let you know.

songseeds

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
May 18, 2017 May 18, 2017

Copy link to clipboard

Copied

Günter,

Don't know if you noticed but Pavel has informed me that failure to set the Site Properties to Fixed before doing anything is something that cannot be changed.  Apparently the only thing I can do is start a New Site and rebuild what I've done so far.  So I will report back after doing this as to whether that change has fixed the problem. 

many thanks,

songseeds

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
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

I've rebuilt the New Site using fixed width before doing anything.  Used scroll efx instead of pinning on the 768 & 1024 breakpoints.  All fonts are now web fonts.  Eliminated inserted images.  And STILL the damned thing loads wide on my iPhone 6.  Are you seeing this too?

Page is visible at songseeds.com/test

I've gone though all the master and home page breakpoints and do not see anything outside the edge guides. 

Here is the updated .muse file:

songseeds4.muse - Google Drive

thanks for your help,

songseeds

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
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

Hmm.  If I turn off pinning, then my header & menu scrolls.  Did you not think of that or is there some other better method for keeping the header & menu visible?

songseeds

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 ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

Fixed breakpoints?

Select the header and menu elements, open the "Scroll Effects" panel, switch on the "Motion" option and set all values to "0".

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
Guide ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

Not for mobile devices only. Muse has a bad business with this. Neither pinning nor scrolling effects is used for mobile devices.

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
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

Yes, thank you.  I found the citation just as you posted.  Google searched for it and kept hitting posts saying "pin it!"  Finally hit one that was mobile specific. 

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 ,
May 19, 2017 May 19, 2017

Copy link to clipboard

Copied

Here the attempt(!) of a very simplified answer:

You have a site with fixed width breakpoints. The code of your site and the browser decide, which breakpoint will be displayed at which browser width. At a given browser width normally the nearest smaller (or equal) breakpoint will be chosen.

For example: If your browser window has a width of 1300 px, not the 1400 breakpoint will be displayed, but the 1200 px breakpoint – with an empty space (or visible browser background) of 50 px to the left and to the right of your page. Therefore you page displays "as expected" at these larger breakpoints.

If you look at your site on an iPhone 6 for example, your 480 px breakpoint will be displayed, and – the page is cut off! Why?

Because browsers don’t use the physical pixel dimensions of your mobile device (= 750 px), but the so called logical width (= 375 px). (For further information look here and/or here​.) If your browser would use the physical pixel instead, the screen rendering on mobile devices would be WAY to small and you couldn’t real anything.

• Solution of your issue: Your smallest breakpoint is 480 px. Reduce this value to 320 px and make sure, that all elements of your page at this breakpoint are within the 320 px page width boundaries.

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 ,
May 20, 2017 May 20, 2017

Copy link to clipboard

Copied

Just to add to Günter Heißenbüttel​ and Pavel Homeriki​, in your case it would help to watch the "Responsive mode" in the menu dropdown Developer (Entwickler).

Bildschirmfoto 2017-05-20 um 16.21.01.png

It might be not perfect but gives you the idea how your website appears. All scroll effects might work in this preview but might be unpredictable in reality from device to device.

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
Guest
May 20, 2017 May 20, 2017

Copy link to clipboard

Copied

Günter - thanks for the explanation and references.  I am a real newbie with Muse and there appears to be a lot of stuff to know that isn't necessarily included in the Adobe Muse Help documentation.

Yes, now the site displays within the logical width.  And yes I have small browser fill bars on both sides of the pages on my phone in portrait.  If I rotate to landscape I have the same 320 logical width pages with HUGE browser fill bars on both sides.  It's horrible.

When I browse the web I don't see pages with browser fill bars on the sides of the pages.  What am I doing wrong?

songseeds

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 ,
May 20, 2017 May 20, 2017

Copy link to clipboard

Copied

Do you use a fluid width breakpoint at 768 with a minimum width of 320?

This is quite important. If you still use fixed width breakpoint it works as expected.

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
May 20, 2017 May 20, 2017

Copy link to clipboard

Copied

Hi Uwe,

All my breakpoints are fixed (1200, 1024, 768 with 320 min width)

songseeds

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 ,
May 20, 2017 May 20, 2017

Copy link to clipboard

Copied

This is your problem.

You should create a fixed width breakpoint and a fluid width breakpoint at 768 with minimum width of 320.

In some cases you may need another fluid width breakpoint between 768 and 320, but rarely.

If this works is not sure as Pavel Homeriki​ mentions above?

I recommend in this case to create a new page as master as well as in your plan view.

Start from scratch like is discussed here:

Muse not redirecting to tablet version

starting here - this is the most helpful advice ever.

Bildschirmfoto 2017-05-20 um 23.50.36.png

From there you could copy your content as desired. From 768 you should think it over what to do.

But fluid width is very important for mobile.

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
May 21, 2017 May 21, 2017

Copy link to clipboard

Copied

Thanks to Günther, Pavel and Uwe for helping this Muse beginner out.  Really appreciate it.

I can see that there are massive page design issues relating to mobiles (tablets & phones).

From you I have concluded that fluid responsive behavior is the ONLY way to get your pages looking correct on these devices.  When I say looking correct, I mean FILLING the screen (without background fill bars on the sides).

The design I have ends up being a complete disaster in fluid as soon as I start reducing the page width.  Muse's handling of those colored rectangles I have is abominable.  If there were a way to keep the layout relationship of the text, graphic and rectangle of each "band" together such that they don't all go off on their own scrambled all over the page, this design would be OK.

As a possible workaround, I went into Photoshop and built several "band blocks" (band name, graphic, text) and placed them on my page (working in Photoshop at 3x resolution and 144dpi).  These end up working in fluid GREAT!  So, I may just build my individual band blocks in Photoshop and place them in Muse to avoid the layout mess. 

Again thanks. 

songseeds

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 ,
May 21, 2017 May 21, 2017

Copy link to clipboard

Copied

Of course there is an answer: "Learn Muse" and after that "Lern Muse".

The direction you have to go I tried to describe here:

https://forums.adobe.com/message/8749608#8749608and here:

https://forums.adobe.com/thread/2271454

This is the whole secret, but you really have to understand what is happening and why it is happening. The major problem is to clearly understand that different elements scale differently (rectangles scale in width or proportionally, images scale proportionally, text boxes scale in width but grow vertically it needed.) To put theses different behaviours together is the real secret of responsive layout, because different scaling and/or differently sized objects interfere differently with other layout elements. We finally are talking here about design skills …

And, referring to your Photoshop adventure": It demonstrates, that you aren’t familiar, with the way, images are handled in Muse: Creating  images in 3x resolution is contra productive! Just read this: https://forums.adobe.com/message/9504936#9504936

My suggestion:

•  Try to figure out as exactly as possible, what you want, and how your site should work.

• Create some dummy sites to test your layout techniques, before starting to build your intended site.

• Wireframes like this are faster to analyse and "debug" than ready made pages with tons of placed images and buttons:

Screen.jpg

• Start with one breakpoint – the widest –, and when you are (almost) done, create the other breakpoints you need.

What we are doing here in this thread is running in circles to iron out one layout issue by producing the next.

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
May 25, 2017 May 25, 2017

Copy link to clipboard

Copied

LATEST

Hi Günter - Thanks for the link to your forum discussions "Resizing Objects as a Group" (2271454), and "Image Processing in Muse" (9504936}.

After reading Resizing Objects over and over and trying things It finally hit me what you were talking about.  Believe me, I studied Muse (both reading and videos) for 3 weeks before starting to use it and I NEVER saw anyone demonstrate the use of some invisible skeleton scaffolding to try and get Muse objects to move in the direction that you would like when using Responsive.

ALSO I appreciate setting me straight on the use of placed images.  I had read somewhere that someone...well, you know where I'm going with this!  Anyone can say anything on the internet.

Because I want my design to include a fair amount of text (not the greatest thing in responsive if you've got multiple "columns" I ended up building my home page with Photoshop layouts for each block and then I built a scaffold of transparent blocks to hold my navigation buttons in place.  I know, it's not the most kosher thing design wise, but for me it works.  I decided that non-scalable text was just not going to work with this design.

I have a question about this business of using transparent scaffolding to help Muse understand what we want and I hope you might choose to reply.  I've started a different thread since it doesn't apply to the title of this one.  It's "How to center a widget in responsive design" (9537156).

Many 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