I received a message from Google Webmaster Tools that one of my website wasn’t mobile friendly.  They referenced a website to check and get recommendations.  Through this research, I also found the Google PageSpeed Insights website for checking other topics related to a website.

One of the issues was the images were too wide for the screen resolution on a mobile device.  I did some research and found a post on how to automatically resize images.  I copied the code and modified for my website.

This is the code that helped:

  • img
  • {
    • max-width: 100%;
    • min-width: 300px;
    • height: auto;
  • }

I removed the fixed width for image and added a CSS class reference and the image displayed fine on desktop and mobile.