Hello.
My website is done with drupal.
I modified theme and it fit well with common mobile resolutions. I am using fixed theme but with custom width per each resolution.
I tested the website with developer tools of firefox and chrome. And it looks fine at all resolutions. But when i test the web in GoogleSpeed Insights viewport is not recognized and it render as normal fixed width... and i do not pass mobile test.
I checked source code, validated HTML and CSS to try discover and fix any error, but nothing found.
This is the website:
https://www.salamanca-university.org/This is the test not passed:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.salamanca-university.orgAny suggestion?
It has the viewport meta:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
These are my 'media' definitions at CSS:
@media screen and (min-width:950px) and (max-width:979px)
@media screen and (min-width:890px) and (max-width:949px)
@media screen and (min-width:790px) and (max-width:889px)
@media screen and (min-width:760px) and (max-width:789px)
@media screen and (min-width:640px) and (max-width:759px)
@media screen and (min-width:595px) and (max-width:639px)
@media screen and (min-width:560px) and (max-width:594px)
@media screen and (min-width:480px) and (max-width:559px)
@media screen and (min-width:427px) and (max-width:479px)
@media screen and (min-width:360px) and (max-width:426px)
@media screen and (min-width:320px) and (max-width:359px)
@media screen and (max-width:319px)
I know 320px is the most important for Google. But i have custom designs for tablets and some mobiles too.
I used same technique in other websites (like
https://www.barcelona-university.es/ ) and they looks fine with 320px.
You can check at
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.barcelona-university.esI do not find where is the mistake.
Anybody see the mistake? thanks