Highlighted

There is a gap in Preview but can't see on Design view?

Community Beginner ,
Dec 24, 2017

Copy link to clipboard

Copied

I need some help on my muse site there is a gap when making preview 'in Preview' or 'Browser'. But I am looking the same breakpoint on Design view cant see the gap? I attached my site folders and files can some the look at it what is wrong my 'ANASAYFA' page..

Dropbox - OzelCocuk

In Preview and Browser

Screen Shot 2017-12-25 at 00.39.24.png

in Design view look;

Screen Shot 2017-12-25 at 00.40.11.png

  • You definitely don’t need a breakpoint at 320 px. Delete it! Or which devices do you think have a smaller display width than 320 px?
  • Make your slideshow lightbox visible, select all lightbox parts (lightbox, prev/next/close buttons) and drag them out of the page area to the left onto the canvas:

     Screen.jpg

  • Repeat this for every single breakpoint.

Now all should work as expected.

Views

282

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

There is a gap in Preview but can't see on Design view?

Community Beginner ,
Dec 24, 2017

Copy link to clipboard

Copied

I need some help on my muse site there is a gap when making preview 'in Preview' or 'Browser'. But I am looking the same breakpoint on Design view cant see the gap? I attached my site folders and files can some the look at it what is wrong my 'ANASAYFA' page..

Dropbox - OzelCocuk

In Preview and Browser

Screen Shot 2017-12-25 at 00.39.24.png

in Design view look;

Screen Shot 2017-12-25 at 00.40.11.png

  • You definitely don’t need a breakpoint at 320 px. Delete it! Or which devices do you think have a smaller display width than 320 px?
  • Make your slideshow lightbox visible, select all lightbox parts (lightbox, prev/next/close buttons) and drag them out of the page area to the left onto the canvas:

     Screen.jpg

  • Repeat this for every single breakpoint.

Now all should work as expected.

Views

283

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
Dec 24, 2017 0
LEGEND ,
Dec 24, 2017

Copy link to clipboard

Copied

  • You definitely don’t need a breakpoint at 320 px. Delete it! Or which devices do you think have a smaller display width than 320 px?
  • Make your slideshow lightbox visible, select all lightbox parts (lightbox, prev/next/close buttons) and drag them out of the page area to the left onto the canvas:

     Screen.jpg

  • Repeat this for every single breakpoint.

Now all should work as expected.

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...
Dec 24, 2017 1
Community Beginner ,
Dec 25, 2017

Copy link to clipboard

Copied

Thanks G.

Your suggestion little helped. But I am still seeing gap even I removed slideshow from in 480px and 360px breakpoint.

New files link:

Dropbox - OzelCocuk 

Why am I still seeing this gap in iPhone 8? As I know iPhone 8 using 480px for breakpoint right?

Image.png

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...
Dec 25, 2017 0
LEGEND ,
Dec 25, 2017

Copy link to clipboard

Copied

iPhone 8 uses 375 x 667 physical pixel. See here: http://iosres.com

I can’t reproduce this „gap“ any more – not at breakpoint 480 px or 360 px.

Look at this simulation:

By the way: Your smallest breakpoint isn’t still set correctly:

The breakpoint has a width of 360 px and a minimal width of 360 px too. This means, it reacts like a fixed width breakpoint (minimal and maximal width are identical.)

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...
Dec 25, 2017 1
LEGEND ,
Dec 26, 2017

Copy link to clipboard

Copied

On a „real“ iPhone 6+ – no gap at all:

Image-1.jpg

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...
Dec 26, 2017 0
Community Beginner ,
Dec 26, 2017

Copy link to clipboard

Copied

Thanks, G.

I think I didn't read your suggestions clearly. After reading again. I realized I didn't follow your suggestion correctly. I moved out from the page all hero part of the slideshow. Now gaps are gone.

For the breakpoint, I think you mention this please correct me if I am wrong. I must remove 320px and 360px breakpoint from my design then I must change minimum width 480 px breakpoint to 360px right?

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...
Dec 26, 2017 0
LEGEND ,
Dec 26, 2017

Copy link to clipboard

Copied

You may do this, if it is necessary for your layout. Please don‘t place breakpoints for devices, you probably have in mind! This is not the Muse approach. Create yor page in the widest breskpoint, drag the scrubber (this grey, vertical handle top right at the breakpoint bar) inwards, and place a new breakpoint, when your design „breaks“ (elements start overlapping, a row of images gets too small, …).

You never will succeed in creating breakpoints device-specific, because in this case, you‘ll need hundreds of breakpoints.

What I was trying to tell you, was this: You have a breakpoint at 360 px and this breakpoint has a minimal width of 360 px too. This won‘t allow any responsive behaviour, because if a screen/browser width becomes smaller than 360 px there won‘t happen anything, because the minimal allowed width is reached at the same time. (Right click onto this breakpoint in the breakpoint bar and check it by looking at the breakpoint settings.)

If you want and need a breakpoint at 360 px, set the minimal width of this breakpoint to 320 px. Normally it should be ok, when your smallest breakpoint is at about 420 px with a minimal width of 320 px. But as I said, this depends on nothing but you layout.

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...
Dec 26, 2017 0