Highlighted

browser display problem

New Here ,
Oct 05, 2017

Copy link to clipboard

Copied

I have a display problem.

In some formats, the site is bordered on the right by a white band. I can not understand why.

Here is the address of the site.

vortexmodel.com

This white band does not appear on all resolutions. It exists in 1920 pixels and in 768 pixels of width. It does not appear on the widths of 1280 for example.

Would you know how to remove it?

Thank you in advance for your help.

In opposite to your master page, your layout page has only fixed width breakpoints. At fixed width breakpoints elements can’t react responsively. You can see this, when you slowly drag the scrubber (= grey handle top right of the breakpoint bar) inwards: Many elements bleed outside, what causes shifting view on mobile devices. (The elements, which don’t bleed outside the borders are stretched to browser width, what works even on fixed width breakpoints.)

2 ways to solve the problem:

  1. Make a smaller breakpoints at around 700 px  and watch out, that no element bleeds outside the page/breakpoint boundaries.
  2. Make your 1024 px breakpoint responsive and and set your element to responsive too. But attention: It will be a real hero task, regarding these many small elements, to let them react synchronously. This may be done, but needs really deep experience with Muse.

So, if you choose the second variant (responsive breakpoint) I’d suggest, to create one image (best: SVG) out of this text/image combination in the middle of the page.

One more, very important, hint: Use standard fonts or web fonts. Your site uses system fonts, which have to be converted to an image during output. Why? Just read my post 4 here: Menus with Responsive Width in 4k Resolution

Views

171

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

browser display problem

New Here ,
Oct 05, 2017

Copy link to clipboard

Copied

I have a display problem.

In some formats, the site is bordered on the right by a white band. I can not understand why.

Here is the address of the site.

vortexmodel.com

This white band does not appear on all resolutions. It exists in 1920 pixels and in 768 pixels of width. It does not appear on the widths of 1280 for example.

Would you know how to remove it?

Thank you in advance for your help.

In opposite to your master page, your layout page has only fixed width breakpoints. At fixed width breakpoints elements can’t react responsively. You can see this, when you slowly drag the scrubber (= grey handle top right of the breakpoint bar) inwards: Many elements bleed outside, what causes shifting view on mobile devices. (The elements, which don’t bleed outside the borders are stretched to browser width, what works even on fixed width breakpoints.)

2 ways to solve the problem:

  1. Make a smaller breakpoints at around 700 px  and watch out, that no element bleeds outside the page/breakpoint boundaries.
  2. Make your 1024 px breakpoint responsive and and set your element to responsive too. But attention: It will be a real hero task, regarding these many small elements, to let them react synchronously. This may be done, but needs really deep experience with Muse.

So, if you choose the second variant (responsive breakpoint) I’d suggest, to create one image (best: SVG) out of this text/image combination in the middle of the page.

One more, very important, hint: Use standard fonts or web fonts. Your site uses system fonts, which have to be converted to an image during output. Why? Just read my post 4 here: Menus with Responsive Width in 4k Resolution

Views

172

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
Oct 05, 2017 0
LEGEND ,
Oct 05, 2017

Copy link to clipboard

Copied

Please reduce your site as much as possible (only one page, only some elements, which demonstrate your issue and give us this small(!!). .muse file via Dropbox or Creative Cloud. Just follow these instructions: https://forums.adobe.com/docs/DOC-8652

Again: Please make some efforts to give us the smallest .muse file possible! This simplifies download an analysing and gives you the possibility, to eventually find the issue by yourself.

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...
Oct 05, 2017 0
New Here ,
Oct 05, 2017

Copy link to clipboard

Copied

Here is the link to the file containing a page of my site.

I think I have done what it takes to share it.

Adobe Creative Cloud

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...
Oct 05, 2017 0
LEGEND ,
Oct 05, 2017

Copy link to clipboard

Copied

In opposite to your master page, your layout page has only fixed width breakpoints. At fixed width breakpoints elements can’t react responsively. You can see this, when you slowly drag the scrubber (= grey handle top right of the breakpoint bar) inwards: Many elements bleed outside, what causes shifting view on mobile devices. (The elements, which don’t bleed outside the borders are stretched to browser width, what works even on fixed width breakpoints.)

2 ways to solve the problem:

  1. Make a smaller breakpoints at around 700 px  and watch out, that no element bleeds outside the page/breakpoint boundaries.
  2. Make your 1024 px breakpoint responsive and and set your element to responsive too. But attention: It will be a real hero task, regarding these many small elements, to let them react synchronously. This may be done, but needs really deep experience with Muse.

So, if you choose the second variant (responsive breakpoint) I’d suggest, to create one image (best: SVG) out of this text/image combination in the middle of the page.

One more, very important, hint: Use standard fonts or web fonts. Your site uses system fonts, which have to be converted to an image during output. Why? Just read my post 4 here: Menus with Responsive Width in 4k Resolution

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...
Oct 05, 2017 0