How To Do Simple Responsive Images
Place Several Images In A Row Responsively
If you’d like to place 3 or maybe 4 images in a row on your page, and have them behave responsively, then you can lay them out like this. This blueprint assumes you are using the media library.
Because of the way WordPress processes images to behave responsively (using the srcset attribute on the image tag), you can end up with an undesired visual result if you place the wrong size of image on the page.
Further, WordPress will make decisions based on the size of the image you initially place, about the size of image it subsequently delivers to smaller devices.
However if you do as we suggest you will get the best visual look and feel but you could end up using larger images than you need in some scenarios. It is a trade-off.
In order to make the best of what WordPress provides, my suggestion is that you place the larger images initially, but make sure they are well optimized before you upload them to the media library. That way any file heaviness on desktops is mitigated, but you still get the best file size for images served to smaller devices, and your page looks good.
- Genesis Extender plugin is used to add the custom CSS.
- Genesis Club Pro plugin is used to add the clearfix class.
- eleven40 Pro theme was used in the demo, although you should be able to use any Genesis child theme with this blueprint with a little CSS tweaking.