Streaming live at 10am (PST)

Navbar width wider than body on android


#1

In my website www.solobailacabaret.com on android phone I see a problem with one of the navbars. There are 2 navbars and one of them has a larger width and makes the page wider than it is supposed to be. You can see it by moving the screen horizontally and you will see navbar that is showing wider. I don't see how to fix it or why it's showing that way.

Could someone please check my website to help me find the problem? I can't find it.

https://preview.webflow.com/preview/solo-baila-cabaret?preview=b22ddd9e71abb404ca9182387db5b727


#2

Hi Mel.
I think I found the reason of the problem

Animation, which moves elements over the right edge of body cause overflow. and even thank you put overflow: hidden on section with slider doesn't help.
If you want to save this animation, I would suggest move not a whole div with arrow, but only icon and div which content arrow make overflow:hidden. Maybe it will save situation.

Regards,
Anna


#3

Amazing.. thanks Anna!! I have noticed that interactions don't work at all on safari on ipad, so I have to create duplicate sections for mobile devices that will not have interactions and leave the interactions only for desktop.

I also noticed that sliders, even without interactions don't autoplay and can't even be changed on safari on ipad. Any interaction on safari doesn't work. Why is that and is there some kind of workaround?? I would like to know because that website hero section is a slider and I would like that it works on ipad as well.

Thank you Anna!


#4

I also noticed that the menu on portrait ipad doesn't open either. I don't see that it has an interacition selected for it, but it doesn't open on ipad. What could I do to fix it?? =/

Thanks


#5

Mel, try to remove on tablet view hover states if using it somewhere. Because on touchscreens it become extra tap.
About other interactions, one of my colleges check your site on his iPad and says it works fine.

Will take a look on menu now


#6

I don't see any problems :confused: Maybe hover state also cause this issues


#7

Thanks Anna. I tried to disable all interactions on all elements for tablet, and smartphones so that they don't interfere with anything. For some reason the slider doesn't work on safari on my ipad. If I check on chrome it works though. I will check on another ipad just to troubleshoot that.

Thank you!!!


#8

Interesting... I checked on another ipad and it works. =/ the problem was my ipad!! Sorry about that, but thank you for helping me out with the overflow problem Anna!


#9

Sorry about your iPad :confused:
But glad you figured it out. :blush: Always welcome!


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.