Mobile responsive websites are increasingly becoming the way websites are viewed. In fact, you can expect 67% of your website visitors to be on a mobile phone. Optimizing content for different size screens is essential not only for general good practice, but it’s also important for branding and looking professional.
In this quick tip, I will show you how to swap images depending on the size of the screen with media queries.
Check out my home page. Do you can see that the image swaps to a vertical design when the window is resized smaller?
How did I do that nifty little trick? Super easy with CSS!
As always, back up your CSS file before you make any edits.
First, you will need to assign your image a class. Insert your image in the HTML doc.
Next, add a style calling out that image class in the proper @media query:
Be sure to change “your-path” to your actual url. This represents the location of where your image resides.
And there you go! Super easy! Did this work for you? If you like this post, please let me know by leaving a comment or two!