Highlighted

problem with media query

New Here ,
Aug 13, 2018

Copy link to clipboard

Copied

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

TOPICS
Learn Dreamweaver

Views

261

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

problem with media query

New Here ,
Aug 13, 2018

Copy link to clipboard

Copied

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

TOPICS
Learn Dreamweaver

Views

262

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 13, 2018 0
Adobe Community Professional ,
Aug 13, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2018 1
Adobe Community Professional ,
Aug 14, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 14, 2018 1
v191 LATEST
New Here ,
Aug 14, 2018

Copy link to clipboard

Copied

Thank you to Ben and Nancy for their help.

Vincent

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 14, 2018 0