Resizing images for mobile

By Matt Woicik|2021-05-02T17:09:22-07:00February 10th, 2015|Categories: Websites|

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.

About the Author: Matt Woicik

Matt is a digital marketing strategist and the owner of ML2 Solutions, a digital marketing agency. He helps businesses increase awareness and get more leads using digital marketing. New marketing methods are confusing, always changing and difficult to figure out. Matt helps to explain things and provide solutions with clear results.