problem with media query

[v191]

Have a photographic site four columns (223 px each) wide.  With small viewports would like to reduce to two

columns wide.  Breakpoint I have been using is 30 ems.   I assume this is a wrong breakpoint as my site continues

to be four columns wide when viewed on my i phone SE.   When I use the slider in dreamweaver to check my media

query, the change to two columns occurs around 480 px.   Don't know if this phone has a retinal display but could

that be part of my problem?    Would appreciate your help.

Also would like to use the swipe feature to move from one larger image to another.   Understand dreamweaver doesn't help

me with this.   I haven't willingly used javascript.   Is there a site easier to use than the one suggested year or two ago?

Thank you,

henry hawkins

www.henryhawkins.com/gypsy

[BenPleysier]

These are the screen widths of the various iPhones

• iPhone SE: 1136 x 640 (727,040 total) at 326 ppi.
• iPhone 6s: 1334 x 750 (1,000,500 total) at 326 ppi.
• iPhone 6s Plus: 1920 x 1080 (2,073,600 total) at 401 ppi.

A breakpoint of 30em is equal to 480px

Because of the number of different clients, a web page must be fluid. Have a look at Beautiful Free Images & Pictures | Unsplash and https://medium.com/@lil_drop/image-gallery-example-using-bootstrap-4-flexbox-6295e1215493

As there is no hover event on a touch screen, my advice is to leave this out.

[Nancy OShea]

In the following example, I used Fancybox 3 (lightbox viewer) which is also touchscreen friendly.  And the masontry style  layout is built with the latest Bootstrap 4.  Optionally, you could use ordinary columns and rows

Alt-Web Demo : Dynamic Photo Gallery with Bootstrap 4, PHP & Fancybox

[v191]

Thank you to Ben and Nancy for their help.

Vincent