Google Ad

Mobile Usability issue fixes for Google (Solved)


Make your web page mobile friendly.

Google is holding Mobile Usability issues for mobile site.

Here I give solution to fix the issue.

 

Viewport

Make sure that you have added following viewport code on your site between <head> </head>

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

Body

Keep your site body in 100% which will match with Mobile devices Resolution.

That’s why you can use following code.

<html>
<head>
Here put CSS, Javascript, Sitelogo etc..
</head>
<body>
Your contents here
</body>
<footer>
</footer>
</body>
</html>

 

Now use following code for <body> 100% wide for Mobile User. Use following css

 body {
    height: 100%;
}

 

Example:

<html>
<head>
<style>
body {
height: 100%;
}
</style>
</head>
<body>
Your contents here
</body>
<footer>
</footer>
</body>
</html>

 

Image

 

Use following css for Images match with devices

img {
  width: auto ;
  max-width: 100% ;
  height: auto ;
}

 

Example:

<html>
<head>
<style>
body {
height: 100%;
}

img {
width: auto ;
max-width: 100% ;
height: auto ;
}
</style>
</head>
<body>

<img src="https://file1.horje.com/data/user1/a3991535-7372-4eca-8b96-1601d00bfa5d.png" alt="" title="" style="">

</body>
<footer>
</footer>
</body>
</html>

 

Youtube video iframe or other iframe, Use following css.

 .video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

Example:

 <html>
<head>
<style>
body {
height: 100%;
}

img {
width: auto ;
max-width: 100% ;
height: auto ;
}
</style>
</head>
<body>

<div class="video-container"><iframe width="853" height="480" src="https://www.youtube.com/embed/z9Ul9ccDOqE" frameborder="0" allowfullscreen</iframe</div>

</body>
<footer>
</footer>
</body>
</html>

 

Now Test on Google Mobile Usability Test URL

 

If you have any question then ask following.

 


Related Post


Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *