Mobile phone only show portion of the webpage & the overlay menu

[chan2015]

I have built a website with breakpoints at 480px & later I added 360px breakpoint ...

I thought these two viewport widths should cover most of the phones. Using an iphone 6s+, the website & the overlay menu looks fine at 480px breakpoint alone. When I asked other people to test it via android phones ...

1. most phones will show about 85% of the webpage, with the right-side "cropped" away.
2. as for the overlay menu, when pressed, some pages will show the correct full menu ... centered ... while some pages will show only 45% of the menu ... it is like the overlay menu has expanded out of view of the mobile screen ... have to drag the screen horizontally to left to reveal the rest of the overlay menu (white spaces underneath this side of the semi-transparent menu).

I have read & watched the responsive tutorials ... but still dunno where to begin fixing it.

Btw, I have zoom-in on all the pages & its breakpoint to see if those hidden layers (from the default size) is "shrinked" back to fit the breakpoint width (by simply checking & unchecking the "visible" button for those hidden layers).

[Pablo]

Usually this is caused by objects which are outside the page boundaries.

Please see 'There is a large is empty space at the bottom or right side of my page.' in the FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817

If you need further assistance then please share a demo project so I can see what you have done.
Related FAQ: http://wysiwygwebbuilder.com/forum/view ... 10&t=82134

[chan2015]

Objects like Timer, HTML <>, Notes also needs to be inside default width?

[Pablo]

No, only visible objects.

See the FAQ for tips how to find elements outside the viewport.

[chan2015]

Kindly download a sample project zip file from:-
https://www.sendspace.com/file/zudems

Issues:-
1. I think the green texture is giving some problems ... sometimes the mobile phone doesn't render the title grid with the green texture as BG.
2. At the bottom ... the 2 cards inside the big blue BG, I think the scroll-transform animation for the cards are also giving problems.
3. Using an android phone, sometimes the same page at different scroll location ... the overlay menu with the "exit cross" is display within the mobile screen ... but sometimes at some scroll location, the overlay menu's "exit cross" button will be out of view at the right side.

Thanks for your help!

[chan2015]

Also, I forgot to mention that the carousel is slightly "cropped" out at the right side when view with an android phone. ...

[Pablo]

Can you please describe exactly what I need to do to see the problem?

I do not have an Android phone. But I think most issues are related to the scroll transitions and more specifically, transforms. If you move an object out of the viewport then this will affect the page width.
For smaller screens, I recommend to disable scroll transitions.
You can disable scroll transitions for smaller screens in the Page Properties.

[chan2015]

Indeed ... all the problems are caused by the scroll transform animation. After, I disable them on Page Properties --> Advanced --> Scroll Events & Transitions, the overlay menu is no longer expanded out of view. However, the carousel is still not completely inside the mobile screen area.

Another page also has the overlay menu issue ... that page has an embedded Google Map location. I have looked at the object <> html code & it has a width : 600. Do I manually go into different breakpoints to change the width to smaller?

[crispy68]

change the width of the google maps to: width="100%"

[chan2015]

Thanks Crispy. I set it to width=90% ... the map portion still has about 5% outside the page width and overlay menu top-right exit button is still out of view. Setting the width to smaller e.g. 70% will make the map smaller but no effect to the overlay menu.

[crispy68]

Can you provide a demo project and where to look to see the issue? It's so much easier to see what you've done and your settings otherwise, we are just guessing.

Setting the map to 90% and it still being too big doesnt make sense so you definitely have something incorrect.

[chan2015]

Thanks Crispy. Stripped down project as below with the "contact"page - menu & the embedded map. When viewed using a Xiaomi Note 7, through Chrome browser, the map's width is slightly larger than the page size. The overlay menu's exit button is still out of view.

https://www.sendspace.com/file/4sigeb

[crispy68]

hey chan2015,

sorry for the delay.

First things I see are this:

1. Make sure your Master_Header has the same breakpoints as your page. You are missing the 768 BP.
2. You have an error in the code for the width of the map. You have:

width=90% and it should be width="100%" (missing the quotes)

3. The HTML box 'type' is incorrect. You have Use <div> to set position and size of the HTML chosen. Change this to: Do not use <div> - this will allow it to fill the entire layout grid.

Fix these issues and see if this fixes your problems.

[chan2015]

Thanks Crispy!

The "do not use div" alone solve the issues of the map & overlay menu.

Is it the norm that all pages should have the same set of breakpoints?

There are only a total of 8 pages in my website. Most pages have 2 breakpoints at 480 & 360. One page has a rollover image (which I think is non-responsive) and hence I have to set 4 breakpoints just to resize that image.

[crispy68]

Make sure to fix #1 and #2 also.

There may be situations where you don't need to have the same breakpoints but I would recommend it as it lessens the chances of you having issues.

A rollover image can be responsive and scale if in a layout grid. Otherwise yes you have to insert breakpoints to resize it in different layouts.

[chan2015]

OMG ... Thanks Crispy again.

I have watched all the videos by Greg Hughes ... learnt a lot ... knew that if I want to build a responsive website ... I have to use layout grids or flex container/grid. All the pages that I made are predominantly using layout grid with some flex container. The thing is after reading your comments, I go and try to set the rollover image to Full width = true ... then it became truly responsive... meaning that I can delete those unnecessary breakpoints.

But I realize the rollover image doesn't really work in mobile phone... though I already "checked" the "do not follow this link" box ... when tapping the image using in a mobile phone ... it rarely show the 2nd image ... it mostly will go to an error page link.

[chan2015]

I tried setting the rollover image "Link" tab ==> link to = File (instead of external address) ... it now works in mobile phone ...

[crispy68]

This is correct. Hover/rollover's don't really work on mobile/tablets due to the fact they use touch events. It doesn't mean you cant still use a rollover it just means a mobile user may not see the rollover change but the button will still work as intended. All types of links should work.