Highlighted

Unintentional duplicate breakpoint content?

Community Beginner ,
Jan 04, 2018

Copy link to clipboard

Copied

I am a newbie to Muse, but I'm determined to learn this, so please forgive my ignorance.

I have created a simple "Coming Soon" splash page with breakpoints for all standard devices... iPhone (320), iPhone Plus (414), iPad vertical (768), iPad horizontal (960) and desktop (1200).

I created the file with very few problems, and the file looks fine in Muse. When I open in the browser or upload to businesscatalyst, and view on each device, everything looks good EXCEPT for the iPad horizontal. The computer screen breakpoint (1200), which looks fine on the desktop, is duplicated as the breakpoint next to it (960), the iPad horizontal. In other words, the iPad horizontal view shows the 1200 desktop layout, which, of course, doesn't fit (way too big).

I deleted the 960 breakpoint in Muse and created a new one, but it's still wrong.

I thought maybe there was something hanging over, or connected to the 1200 (if that is possible, lol) which would somehow bring in the wrong breakpoint for iPad-h, but I can find nothing connecting the 960 with the 1200. I don't understand what could be doing this.

Any ideas? Thanks in advance for any help you can give!

EG

Can’t see, what the issues have to do with „Unintentional duplicate breakpoint content“ as you are writing in the thread title.

The issues of your page are simple placement and scaling issues. Look at this small screencast:

  • The white rectangle and the header elements bleed outside the breakpoint width, because,, for example, the rectangle is set from „Stretch to browser width“ to „responsive width and height“ starting at breakpoint 960 px.
  • The text boxes are set to Scaling: None“ and pinned to the left.

If you fix these issues, all will work fine!

Views

236

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

Unintentional duplicate breakpoint content?

Community Beginner ,
Jan 04, 2018

Copy link to clipboard

Copied

I am a newbie to Muse, but I'm determined to learn this, so please forgive my ignorance.

I have created a simple "Coming Soon" splash page with breakpoints for all standard devices... iPhone (320), iPhone Plus (414), iPad vertical (768), iPad horizontal (960) and desktop (1200).

I created the file with very few problems, and the file looks fine in Muse. When I open in the browser or upload to businesscatalyst, and view on each device, everything looks good EXCEPT for the iPad horizontal. The computer screen breakpoint (1200), which looks fine on the desktop, is duplicated as the breakpoint next to it (960), the iPad horizontal. In other words, the iPad horizontal view shows the 1200 desktop layout, which, of course, doesn't fit (way too big).

I deleted the 960 breakpoint in Muse and created a new one, but it's still wrong.

I thought maybe there was something hanging over, or connected to the 1200 (if that is possible, lol) which would somehow bring in the wrong breakpoint for iPad-h, but I can find nothing connecting the 960 with the 1200. I don't understand what could be doing this.

Any ideas? Thanks in advance for any help you can give!

EG

Can’t see, what the issues have to do with „Unintentional duplicate breakpoint content“ as you are writing in the thread title.

The issues of your page are simple placement and scaling issues. Look at this small screencast:

  • The white rectangle and the header elements bleed outside the breakpoint width, because,, for example, the rectangle is set from „Stretch to browser width“ to „responsive width and height“ starting at breakpoint 960 px.
  • The text boxes are set to Scaling: None“ and pinned to the left.

If you fix these issues, all will work fine!

Views

237

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
Jan 04, 2018 0
Adobe Community Professional ,
Jan 04, 2018

Copy link to clipboard

Copied

Which iPad are you talking about?

Bildschirmfoto 2018-01-04 um 23.07.59.png

At these days, using responsive design, it is recommended and good practice to design not for certain devices.

It is recommended to start at the biggest breakpoint (maximum width) and use this grey vertical "scrubber" on the right hand side

at the top of the canvas and redesign as soon as your design "breaks". That's the point, when breakpoints can get quite handy.

Could you provide a link so we can have a closer look on your issue?

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...
Jan 04, 2018 0
Community Beginner ,
Jan 04, 2018

Copy link to clipboard

Copied

fotoroeder,

Thanks for responding.

iPad 9, 7.

leonardwheeler01.businesscatalyst.com

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...
Jan 04, 2018 0
LEGEND ,
Jan 04, 2018

Copy link to clipboard

Copied

Would you please share your .muse with us, following these instructions: https://forums.adobe.com/docs/DOC-8652

Then we can have a closer look. I assume, this is a really small issue, which can be fixed without problems.

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...
Jan 04, 2018 0
Community Beginner ,
Jan 04, 2018

Copy link to clipboard

Copied

Günter,

Here is the link to the .muse file in Dropbox. I left two pages in the file, both for the iPad size, because when I delete the vertical version, the horizontal version (the problem page) falls apart, which may tell us something.

Anyway, let me know if I need to do anything else. I'm assuming I saved the file without assets, since no assets showed up in that location.

Dropbox - Zen.TestPage1.4.18.muse

Thank you again for your help!

EG

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...
Jan 04, 2018 0
LEGEND ,
Jan 05, 2018

Copy link to clipboard

Copied

Can’t see, what the issues have to do with „Unintentional duplicate breakpoint content“ as you are writing in the thread title.

The issues of your page are simple placement and scaling issues. Look at this small screencast:

  • The white rectangle and the header elements bleed outside the breakpoint width, because,, for example, the rectangle is set from „Stretch to browser width“ to „responsive width and height“ starting at breakpoint 960 px.
  • The text boxes are set to Scaling: None“ and pinned to the left.

If you fix these issues, all will work fine!

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...
Jan 05, 2018 2
Community Beginner ,
Jan 05, 2018

Copy link to clipboard

Copied

You da man!

As I said, I am a newbie. Not knowing another way to explain my problem, all I knew was that I was seeing two of the 1200 layouts; one 1200 on the desktop, and another 1200 in the iPad horizontal, which did not make sense, because I knew I didn't intentionally make it that way. With my limited knowledge that translated to a duplicate of one breakpoint in two different locations. I thought about the possibility of something "hanging over," but I just couldn't see it. 

I so appreciate you taking the time to help me with this. I can instinctively tell Muse is amazingly powerful. I just need to invest time in it.

The Adobe support community rocks!!!!

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...
Jan 05, 2018 0
LEGEND ,
Jan 05, 2018

Copy link to clipboard

Copied

Fine! If you have other questions, you know, where to go!

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...
Jan 05, 2018 0