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.

 

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.

 



Find More related Mobile Usability issue fixes for Google (Solved)


Have any Question or Comment?

Leave a Reply

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