Link to home
Start Free TrialLog in
Avatar of Melody Scott
Melody ScottFlag for United States of America

asked on

Why do these two animation tags break the page on mobile?

If you take this page: https://www.magickitchen.com/test-bounce.html and test it on Google's mobile tester: https://search.google.com/test/mobile-friendly?url=https%3A%2F%2Fwww.magickitchen.com%2Ftest-bounce.html  You will see that the page isn't mobile friendly.

With the help of some experts here, I was able to narrow that down. By removing the classes  animated bounceInDown  from the orange circles under How it Works, the page becomes mobile friendly again.

Is it possibly just this css on bounceInDown? transform: translateX(400px);

I hope that is enough information, thanks.
Avatar of lenamtl
lenamtl
Flag of Canada image

Hi,

The tools is not for mobile visualization, it just a screen capture of the rendered page.

I have tested  the url with my cell phone and the bounced is ok, I would not change the code as it is working fine using Chrome

What you have to fix is (from tool result):
-Clickable elements too close together
-Text too small to read

If you want to preview the website in mobile view you can resize the browser windows or use real mobile device and tests different browser.
For more complete testing you can use https://www.browserstack.com 
or https://saucelabs.com/ 
I do prefer browserstack for mobile testing.

You can also check this website for browser compatibility https://caniuse.com/
https://caniuse.com/#search=animation or any element / function you want to check

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX

For CSS animation I usually use https://daneden.github.io/animate.css/
Avatar of Melody Scott

ASKER

Hi. If the classes animated bounceInDown  are in that section, then I get the  -Clickable elements too close together
-Text too small to read. If I take them out, the page is fine.

What I didn't say is I went through all this in another question on here. Those two classes are the problem. They break the page on certain phones. (Pixel 2 was mentioned). Please see my former question here:  https://www.experts-exchange.com/questions/29156709/Why-Does-Google-Mobile-Test-show-this-screenshot-and-I-can't-replicate-the-Issue-in-Chrome.html
What they mean by that is that the links are too close so put some spacing / padding between item using a span or display differently, use bigger font size

Browse our two menus: A LA CARTE (some space here) and COMPLETE MEALS . We cover a great variety of diets.

Browse our two menus: 
- A LA CARTE
- COMPLETE MEALS

We cover a great variety of diets.

Open in new window

No, I'm sorry, you are not understanding. I have fixed the problem.  https://www.magickitchen.com  tests ok.

And all I did was take out those classes. In the last question, an expert gave me the clue by saying that on his pixel 2, it was not right down to the "what's popular", so I took out elements until the page tested right. And that's what the problem was. It's the classes animated and bounceInDown .

If the tag looks like <div class="col-xs-12 col-sm-4 animated bounceInDown go" data-id="1">, then Google gives me those errors. If I change the three divs around those circles to <div class="col-xs-12 col-sm-4" data-id="1"> ,  <div class="col-xs-12 col-sm-4" data-id="3">,  <div class="col-xs-12 col-sm-4" data-id="5">then the page is fine.

Compare the two pages on the mobile test: https://www.magickitchen.com/test-bounce.html  and https://www.magickitchen.com.
ASKER CERTIFIED SOLUTION
Avatar of lenamtl
lenamtl
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ok, thanks.
thanks, will try that!