Breakpoints VS. Using Alternate Layout (Tablet/Phone)

[pixelfixel]

PLEASE HELP.

I've created a website, but unfortunately it's becoming quite frustrating trying to make it work at smaller breakpoints. The site goes nuts. If I try and fix at a different breakpoint it completely changes it in my larger breakpoint. Sure hope there is an easy fix for this.

I get the following error when I preview my desktop version of the site:

Warning: Master has multiple layouts (Desktop, Tablet, Tablet) and also breakpoints on non desktop devices and these breakpoints won't be used. You may want to delete the overlapping alternate layout or the unreachable breakpoints on this page....

I have no idea why it has two tablet version as they say above. Should I only work with breakpoints and delete the alternate layout Tablet?

I've wasted so much time with something that I thought would be easy. Adobe certainly makes it look that way in the videos.

Anyway if someone can look at my site below and offer some suggestions I would really appreciate it.

Desktop version of site

Tablet version of site

[Günter Heißenbüttel · Accepted solution]

The second site doesn‘t exist („Page not found“ error), the first is heavily mislayouted. Please colour you page background (not browserbackground) and check, if there are elements overlapping/placed outside the breakpoint /page width. Check this on layout and masterpage. As I can see, there’s really lots of them!

Furthermore, drag the scrubber (this grey, vertical handle top right to the breakpoint bar) slowly inwards and see, if elemens float outside your breakpoint/page boundaries.

If you find no further problems, and your page is still misbehaving, please reduce you site to only the elements shown in your links (no more elements, no more pages) and share this .muse file with us by following these instructions: https://forums.adobe.com/docs/DOC-8652

Even better: If I look at your sample site, and see all these issues, I really like to suggest you, to stop layouting for some hours and have at first a very(!) deep(!) look into these tutorials: https://helpx.adobe.com/en/support/muse.html

[pixelfixel]

Thank-you so much for taking the time to help me. My site had so many missing assets (that I didn't use) that I decided to copy and paste the layers into a completely new website, and things worked so much better.

The revised site is here. I still have to do the tablet and phone version, but if you have comments beforehand, I would greatly appreciate it.

[Ussnorway]

I'd start by making your layers clear, for example the menu (imo should be at top) is above some parts and under others

the basic design is fine for desktop but will not really work on a phone... people have limited wifi and don't want to wait forever to see lots of images... i'd go single colum with thubnail or no images on the phone layout

[pixelfixel]

Agree. I'll see what I can do about that. Thanks for the thoughts for the phone. I'll be keeping that simple.

[pixelfixel]

I'd like to have my browser fill with the taupe color all the way across when viewed on a large monitor. Should I make a larger breakpoint and fill more of the page background? Customer wanted the taupe color, I wanted white. Thanks.

[Ussnorway]

try changing the end point to expand

the default is less than... click it to greater than (makes the broswer fill expand to whatever size the screen is

[pixelfixel]

Thank-you Ussnorway!