Hey guys! Jeff here with a quick, down & dirty website DIY tip on how to make responsive images. We pride ourselves on helping our clients out on their website projects but let’s be realistic – not everyone wants to have a professional put their website together for them, whether it’s for budgetary reasons, personal pride & satisfaction in being self-sufficient, or something else.
There’s also the matter of the changing digital landscape as it relates to older, previously established websites. It can be nearly a full-time job keeping a website updated to keep in line with new styling regimes, proper SEO compliance, & new content. Most of us are it – the only ones doing the job, which means that we just don’t have time to keep up with everything & with the fraud issues involved in remote work, vetting a webmaster or a developer can be downright frightening.
For those of you DIY types who with trust issues & who want to be self sufficient, this is for you.
Whether your website is WordPress, Joomla, a static HTML site, SquareSpace, Wix, or some other random platform, they all behave the same because that’s how the web works – we cater to web browsers like Chrome, Firefox, & Safari. So you’re going to have a style sheet, usually named style.css, which is what determines most of how your website looks & acts. If you’ve noticed that your website’s images aren’t behaving properly on mobile devices like tablets & phones, you need to make your images mobile responsive.
So, how do you do that? How do you make a responsive image? What the heck is a responsive image, anyway? Simply put, it’s an image remains within the bounds of the website, regardless of the display size. Why does it matter? Well, if your image is 1,000 pixels wide and images on your website don’t resize like they should, you’ll never see the image in one glance on a mobile device, will you? These devices tend to be just a few hundred pixels in width, so the answer, if you were wondering, is no. No you won’t.
So – here’s what you need to add to the end of your style sheet to make sure that your website’s images are mobile responsive:
img { max-width:100%;}
Unless your website is constructed in very non-standard ways, this will do what you need. If you insert this in your style sheet & it doesn’t work, you could try this:
img { max-width:100% !important;}
If that still doesn’t work, you need to hire a professional. Good luck!
Jeff