Responsive webpage advice

[theremotedr]

Morning,
Im making a page for some photos & would like some advice please to make it responsive for screen size like pc, mobiles, ipads etc
Thanks

Here is the page in question

https://www.theremotedoctor.co.uk/gallery.html

[coothead]

Hi there theremotedr,

As far as I can see your page is responsive - ( no sign of a horizontal scrollbar ).

coothead

[theremotedr]

Hi,
I’ve been looking at some photos on a mobile device and in portrait view they look ok but If I then turn the device to landscape view the photo is bigger than the screen this need to start moving the picture to view it all.

Thansk.

[coothead]

Hi there theremotedr,

Personally, I do not own a mobile device and cannot comment about iit's rendering.
For testing purposes I use Firefox's built in "Responsive Design Mode" tool and
it displays the image correctly in both both viewpoints.

As a test, download one of the photos to your mobile device and see how it renders
in both viewpoints.

Let me know the result of your testing.

coothead

[theremotedr]

When downloaded to my phone it’s fine.
When I look at the same photo on the site in landscape mode you only see say 3/4 of the photo.
The 1/4 you don’t see is off the bottom of the screen.
Hence a code to check what screen is used then show 100% of the photo accordingly

[theremotedr]

Tomorrow I will browse one of my pages to locate it and also use.
Just had a brainwave.

[theremotedr]

Morning,
Yes i agree.
Last night i was reading & now applied some css media queries to the bottom of my css "gallery1.css"

When looking on a mobile device it doesnt scale correctly, looking at it in landscape it looks fine BUT when in portrait the image is off the screen.
Please can you look at my css file & see what ive done wrong.

I applied the css for .modal-image but maybe that was incorrect or just the css in incorrect.

Many thanks if you can take a look & i can test.

Have a nice day

[theremotedr]

Just an update.

The css i applied i wrote it like below,

.modal-image

But using the following i now see a difference.

#modal-image

The "." didnt have any action BUT when "#" was used it now has.

Please take a look to if if anything i missed there.
Thanks

[coothead]

Hi there theremotedr,

it is impossible to code for all the mobile and other devices and silly to try.
And I would not worry about laptops and desktops. Users are perfecty able
to manually resize windows to suit the content.

By all means code for your personal choice of mobile or other devices.

Let's asume that you are using "iPhone 5" or "iPhone 6" then this would be
myfinal CSS for the project....

/****************** modal window ******************/

#modal {
    position: fixed; 
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: linear-gradient( to bottom, #666, #000 );
    text-align: center;
 }
#modal-image, 
#modal video {
    width: 60%;
    height: auto;
    margin: 1em auto;
    border: 1px solid #fff;
    border-radius: 0.75em;
 }
#closure {
    padding: 0.5em 2em;
    margin-top:1em;
    border-radius: 1em;
    font-size: 1em;
    cursor: pointer;
 }
.hide{
    display: none;
 }
 
 #modal video {
    display:block;
    border-radius: 0;
 }


/************** For iPhone 5 and 6  **************/
@media (width: 568px) and (height: 320px),
       (width: 667px) and (height: 375px) {
#modal-image, 
#modal video {
  height: 70%;
  width: auto;
  }
 }

@media (width: 320px) and (height: 568px),
(width: 375px) and (height: 667px) {
#modal-image, 
#modal video {
  height:auto;
  width: 90%;
  }
 }
 /*******************************************/

 /***************************************************/

My tests using Firefox's "Responsive Design Mode" showed reasonable results
in all of the 17 devices that I had set.

coothead