Issue at 480px view

[Carlo]

Hi, I'm creating the site with a 480px breakpoint. The problem I'm having is that when the browser loads the page, only the first grid layout is visible correctly (even if you try to swipe). From the second grid onwards, when you swipe, there's a gap that I can't figure out how to eliminate... Even loading the dialog from the books page, the dialog is correctly centered on the screen but the space underneath is visible and it's ugly! I don't know how to fix this anymore. Could someone more expert than me kindly help me? Thank you so much. The site at the moment is loaded in my test host at the following: https://www.mad4you.netsons.org/ET_MBK_2026.php

[crispy68]

Hello, can you be a bit more specific on where to look and what the issue is? I've looked at your page on my phone and desktop but it's not apparent to me.

[BaconFries]

Please see this FAQ "There is a large is empty space at the bottom or right side of my page":
https://wysiwygwebbuilder.com/forum/vie ... 10&t=63817

[Carlo]

Hi Crispy68, if you swipe from left to right (the page where is the title, the page doesn't show any right side space. If you scroll to the Biografia page then if you swipe you'll see an empty (black) space along the last page... I tried to modify several settings but unsuccessfully. I suspect that the issue are the banners (I've used the banners as headings for any page). Any ideas ? Thank you

[Carlo]

Hi BaconFries. Yes I saw the Faq you are referring to but still unable to solve the issue. Maybe are the banners I am using as headings ? Thank you.

[Carlo]

Hi all. Could it be that objects outside the page (the dialogs), in the Default view, are affecting this display error in the 480px view?

[BaconFries]

Could it be that objects outside the page (the dialogs), in the Default view, are affecting this display error in the 480px view?
If you scroll to the Biografia page then if you swipe you'll see an empty (black) space along the last page

Yes If you can scroll, then there is most likely an object outside the viewport...

[crispy68]

If i'm looking at the right thing on that page, I believe it is the animation of Heading1Mobile, Heading18 and Heading2Mobile that is causing the space on the right. The animations starts with these objects being twice the size and then animating to their normal size. The issue is when these start at 2x the size they are outside of the width of the screen which causes the screen to be wider causing the horizontal scrollbars. Once they finishing animating the screen returns to the correct width and there is no horizontal scrollbars.

Here is a pic of what I see:


In this image you can see where "Heading2Mobile" (indicated by the red arrow in code) is 607px wide but my mobile view is only 399px so it is creating horizontal scrollbars where I can push it to the left.

[Carlo]

[quote=BaconFries post_id=506758 time=1770079571 user_id=2842]
[quote]Could it be that objects outside the page (the dialogs), in the Default view, are affecting this display error in the 480px view?
If you scroll to the Biografia page then if you swipe you'll see an empty (black) space along the last page[/quote]
Yes If you can scroll, then there is most likely an object outside the viewport...
[/quote]

Hi and thank you for providing help and support. The only things that are outside the viewport are the dialogs I am using to describe each book, without making a separate page for each of them....There are 20 books and I would like to do 20 pages !!! Dialogs seemed to me a good solution, linked via the events to the cards...do you have any different suggestion ? Thank you.

[crispy68]

I still say it is your animation and not the dialogs that are an issue.

[Carlo]

[quote=crispy68 post_id=506770 time=1770124672 user_id=65377]
I still say it is your animation and not the dialogs that are an issue.
[/quote]

Hi. Could you please tell me where I can modify the size of the animation ? I have tried to do some tests modifying gut/font size/layout width (true-false), but unsuccessfully...However, even if the animation causes the gap, then the page adapt to the screen automatically at the end of the animation, but still you have the gap also in the next Pages where there is not animation (except for the banners, for example)

[crispy68]

...but still you have the gap also in the next Pages where there is not animation

What other pages are you referring to? Seems everything is on the same page and the menu links just jump to different parts of the page. Can you provide a pic of what you are seeing and where? I don't see where the banners are causing an issue.

As for the animations, you are probably using a pre-defined animation. You will need to go into the animation manager, click on the animation you are using (looks to be vanish-in) and adjust the scale factor for that animation or copy and create your own. Or use a different animation altogether.

[Carlo]

If you scroll to the next section Biografia and the next Libri and so on, the page does not automatically adapt to the screen like happens to the first. Yes I can send screenshots from my smartphone to let you see what I mean but where ? Thank you

[crispy68]

You can upload pics to your server and then link to them here in the forum.

It looks to me that you have the animation fire when the page loads but when you scroll down the animation resets because if I scroll back to the top the animation starts again. I would set the animation to fire once when page is loaded.

[Carlo]

I am using Events for the animation...am I wrong ?

[crispy68]

No. It's the animation itself causing horizontal scrollbars that I see. The animation you've chosen is scaling your object by 2x which is causing it to be bigger than the screen size in mobile view which then causes the horizontal scrollbars (see my pic above in previous post). You either need to adjust the animation to not scale it so big or use a different animation for the text.

Unless i'm missing something, i'm not seeing anything else on the page causing horizontal scrollbars.

[Carlo]

Okay ! Now I'am working on it and I hope to solve this nightmare Thank you very much for your time Crispy68

[Carlo]

Crispy68, I tried changing the animation type, and you were right: it was the animation type I had chosen that was causing the problem (which is a shame, because I liked it, and it's a bit limiting). Now I've chosen a different one. The problem occurs only when the first screen loads, but at least now, when scrolling to other sections, I no longer see the gap, even when swiping and it's ok ! Thanks also for the suggestion to disable the animation reloading when returning to the initial section. You've been a great help! God bless!