Shoptimized Theme: How can I make a responsive page that contains many images?

Store Design
1

I want to make a similar page to this, that is responsive.

pain section1.png
pain section1.png1920×1542 36.7 KB

How would can I get this to work if it is responsive? Could I call for other versions of the image that are the same size for phones? If so how?

This image is how it will look laptop, but on a phone, the images will be underneath each other.

How can this be done using the latest Shoptimized theme editor? And how wide should the widest images be?

And examples of code would be greatly appreciated.

Thank you in advance! :slightly_smiling_face:

2

@Nathan_Wright1 - this will need a lot of custom code for each view and will change if you add/remove images

3

Thank you for responding. Here is a better explanation with some code examples:

responsive like gallery.png
responsive like gallery.png2062×2382 262 KB

This is the closest code example I have found:
https://codepen.io/kilianso/pen/BpZqON

How can I customize this code to suit my needs?