Highlighted

White Gap on full width rectangles on Android Devices only.

New Here ,
May 09, 2019

Copy link to clipboard

Copied

Hello,

I've been looking through the forums about the mysterious white gap that appears on websites viewed on mobile.

Was there ever a fix for this?

It's weird because the gap only appears on android devices like samsung phones and tablets no mater what browswer.

ALSO strange is that my masterpage is just the top black header with logo etc, and that DOES span 100% width, with everything else on the home page left aligned.

Apple devices look perfect as well as all PC/MAC desktop/browsers.

I've checked all rectangles are at 100% width. No overhanging elements.

I'm stuck! Can somone please help by taking a look at the website I've launched on an android device?

www.ici.aero


I can upload a link for anyone who would be intersted in looking at the .muse file


Thanks in advance for any help.

Adam

Screenshot_20190509-134930_Samsung Internet.jpgScreenshot_20190509-135259_Chrome.jpg

Views

139

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

White Gap on full width rectangles on Android Devices only.

New Here ,
May 09, 2019

Copy link to clipboard

Copied

Hello,

I've been looking through the forums about the mysterious white gap that appears on websites viewed on mobile.

Was there ever a fix for this?

It's weird because the gap only appears on android devices like samsung phones and tablets no mater what browswer.

ALSO strange is that my masterpage is just the top black header with logo etc, and that DOES span 100% width, with everything else on the home page left aligned.

Apple devices look perfect as well as all PC/MAC desktop/browsers.

I've checked all rectangles are at 100% width. No overhanging elements.

I'm stuck! Can somone please help by taking a look at the website I've launched on an android device?

www.ici.aero


I can upload a link for anyone who would be intersted in looking at the .muse file


Thanks in advance for any help.

Adam

Screenshot_20190509-134930_Samsung Internet.jpgScreenshot_20190509-135259_Chrome.jpg

Views

140

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
May 09, 2019 0
LEGEND ,
May 09, 2019

Copy link to clipboard

Copied

Sounds, to be exactly the same issues as described in this thread: https://forums.adobe.com/thread/2618777

Please read my answers (and additionally have a look into the threads, I was linking there).

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...
May 09, 2019 1
New Here ,
May 09, 2019

Copy link to clipboard

Copied

Thanks for the tips!

Found something interesting. I deleted the 3rd pary widget with no change.

Then deleted section by secton with no change.

Then deleted everything except  the header and footer and the footer span full width no problem!

I started to add in section by section, uploading and checking on android phone and everything looks good till about the 3rd section down of the website a rectangle set to 100% width and a fill of an image. As soon as I uploaded that I started to see the start of a white gap on the far right. Not huge about 5 pixels wide.

I deleted that the image but the small 5 pixel wide white gap stayed! I began to delete any progress and the gap remained until I deleteed all but the header and footer again.

I'm not sure what else I can do to avoid this happening as I work down in sections. The first 2 sections I added looked great. Was the third down that seemed no different then the first 2.

Do you have any idea what could be causing this?

Thanks for your time.

Adam

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...
May 09, 2019 0
New Here ,
May 09, 2019

Copy link to clipboard

Copied

Furthermore, I've tested each section individually, all sections but 2 kept at 100% span android phone along with the header and footer. The strange part is, I now kept all the individual sections that stayed 100% span when individually tested and when uploaded together the white gap appers to the right side again.

I feel like I'm out of options other then to look at the html?

Thanks,
Adam

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...
May 09, 2019 0
Adobe Community Professional ,
May 09, 2019

Copy link to clipboard

Copied

Did you follow Günter Heißenbüttel​s advice in on of his thread answers?

If yes (and I assume, you did not) give us a reduced .musefile to have a closer look.

Please reduce your. muse to only one page with that elements, which cause the issue.

I am 99,9+% sure that it is a design issue. Maybe caused by the 3rd party widget.

Did you use fixed width breakpoints or fluid width breakpoints?

Did you get the coincidence between this: which are (a) placed on fixed width pages and (b) stretched to browser width.

in Guenters answer?

Also, did you use some pinning? This should be avoided on mobile devices. @Günter Heißenbüttel also wrote this.

I am quite sure that watching the html is not necessary at all, though.

Kind 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...
May 09, 2019 0
Most Valuable Participant ,
May 09, 2019

Copy link to clipboard

Copied

if you are taking about this white gap then the error is the design which has nothing to do with android devices

Screenshot (2550).png

the tips

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...
May 09, 2019 0