Image shown larger than css file info

[theremotedr]

Morning,
I am trying to center an image & specify its size but the image is always shown at a larger size rather than the size in the css.
Please can you check & advise.

Thanks

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

[coothead]

Hi there theremotedr,

this code...

img {
    display: block;
    width: 100%;
    height: auto;
}

...needs to be overriden with this additional css property...

.header-container img {
      max-width: 260px; /* adjust this value to suit */
      margin: auto;  /* adjust this value to suit */
      border: 1px solid #000; /* remove or adjust this value to suit */
      border-radius: 10px; /* remove or adjust this value to suit */
      box-shadow:  6px 6px 6px rgba( 0, 0, 0, 0.4 ); /* remove or adjust this value to suit, -  rgba() gives transparancy to the shadow */
}

coothead

[theremotedr]

Hi,
Ive managed to do what i was capable of on my own.
Please can you check my page as i would like assistance with a couple of things.

1, "PHOTO ISNT SHOWN THE SAME SIZE"
Ive used an image as a test "of which i will change for the correct one" you will see that even though its the same 300 x 168px file its actually shown smaller.
Im needing it to be the same as the one shown,please see red arrows.

2, "PARTIAL SCROLL OF PAGE"
Is it to much trouble to somehow do the following.
Looking at the green arrows put a freeze / fixed line there,
I mean when the user scrolls down the page the image & buttons ABOVE the freeze / fixed line will stay put & all the photos BELOW the freeze / fixed line will scroll UP & BEHIND the image & buttons.

[coothead]

Hi there theremoted,

...you will see that even though its the same 300 x 168px file its actually shown smaller.

You are mistaken it is the gallery image that is larger.The header image is a static 300 x 168px.
If you decrease the page width you will find the gallery image size also decreases.

As for your second problem, that will need some thought.

coothead

[theremotedr]

I believe i have fixed Issue 1

[theremotedr]

I have read post number 4 & made the image 320 x 179 to fix the issue

[theremotedr]

Coothead,
Take a look hear to get the idea of my goal.

https://blog.hubspot.com/website/sticky-menu-wordpress

https://www.w3schools.com/howto/howt...cky_header.asp

It shows the header fixed & the content below to scroll.

Hope this helps

[coothead]

Hi there theremotedr,

Have a look at my copy of your page...

updated gallery.html

Scroll down the page and then comment.

coothead

[theremotedr]

For me the whole page scrolls,nothing is fixed

[coothead]

Hi there theremotedr,

For me the whole page scrolls,nothing is fixed

You probably need to clear cache - ( Ctrl +F5 key ).

It can sometimes takes a few repitions, though.

coothead