Scroll photos into view once selection made

[coothead]

Hi there theremotedr,

a little while ago I pointed out to you that some
of your jpg images needed compression to save you
bandwidth and speed up page loading time.

For example this one...



...weighs in at 1.7MB and 5456px by 3632px size.

Take a look at the attached compressed image
which has a size of 66.6KB and 1280px by 852px size.

This was achieved with the free software from here...

https://riot-optimizer.com/?ref=RIOT

coothead

[theremotedr]

I did use that software but obviously different settings you used.

I did a batch compression & left the compression settings at the default.

So to maximise on this do I now have to do it again to the images currently in use ?

Also it would be nice for you to advise a line of code & where to place it so the header image docks closer to the top of the screen but only on mobile items.

Just looking to see the affect so good chance I will revert back to its current state.

[coothead]

Hi there theremotedr,

To make the header image closer to top open the CSS file and scroll to bottom.
Then change this...

@media( max-width: 544px ){/* adjust value to suit */
.header-container {
    width: 160px;
    height: 90px;
}
.h2text {
    font-size: 16px;
 }
.btn { 
    padding:4px; 
    margin-bottom: 2px;
  }
}

...to this...

@media( max-width: 544px ){/* adjust value to suit */
body{
  padding: 0 10px;
}
.header-container {
    width: 160px;
    height: 90px;
}
.h2text {
    font-size: 16px;
 }
.btn { 
    padding:4px; 
    margin-bottom: 2px;
  }
}

The images that really need you attention are those like 9.jpg (1.7MB ).
check out the attachment. it will, hopefully, walk you through the
method of image compression.

coothead

[theremotedr]

Ive applied that code but i dont see the image move either up or down.
What i do see is the 3 photos for each row move around.

The photo you had shown of the plane what % did you use to get the image size that small,.

I did use RIOT

[coothead]

i dont see the image move either up or down.

I've jut looked at your page and I see that it is working OK.
Perhaps you need to do a "Ctrl F5" to get the updated CSS.

It kicks in for screen width less than or equal to 544px.
You can, of course, adjust that value to suit.

The photo you had shown of the plane what % did you use to get the image size that small,.

Have you not read the READ ME text file in the attachment of post #43?

RIOT-2.jpg shows the original width of 9.jpg - ( 5456px x 3632px ).
RIOT-3.jpg shows the manually adjusted width of 9.jpg - ( 1280px x 852px ).

coothead

[theremotedr]

Using the built in dev tool i see in the css line 25 alters the padding.

[theremotedr]

I have read the RIOT info but the photo i have would not reduce in size any more.
I started with the original of which after using RIOT i see the photo currently in use

[coothead]

I have read the RIOT info but the photo i have would not reduce in size any more.

That is nonsense.
Check the attachment which contains your compressed 9.jpg image.

If you are unable to compress your oversized images yourself,
no problem, send me links to them and I will do them for you.

coothead

[theremotedr]

It’s not nonsense.
I compressed the original from say 8meg to 1.7meg.

I’ve tried to the do it again on the 1.7meg photo but it would t touch it.

[coothead]

Hi there theremotedr,

I've already sent you the 9.jpg image - ( reduced from 1.7MB to 67KB ) in post #48.

My offer to compress others still stands.

coothead