Assessment wanted for - Mozilla Splash Page

[Keyboardguy]

Hello, could someone please assess this?

Link to task: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page

Link to my code:

Glitch Code Editor ･ﾟ✧

As a side note, the max-width: 100% doesn’t stretch the red panda image across the whole page so it might look a bit weird.

Thanks, Keyboardguy

[justsomeone]

Hello @Keyboardguy

you doing great well done here are my notice

1. the href / rel /type values in the link element should be wrapped by double quote not single quote

2. the issue of the image is the image file it self so for example in the min-width size of picture element if you used this image

https://raw.githubusercontent.com/mdn/learning-area/main/html/multimedia-and-embedding/mdn-splash-page-start/originals/red-panda.jpg

you will notice in bigger screen size it fill the div element that it part of

when you crop the image make sure it’s size is same or bigger to the required size so using your value it should be 600px (width)or more cause the max-width value in the css code

.red-panda img {
        display: block;
        max-width: 100%;
      }

will not make the image increase it’s size more than it’s actule size which prevent the image from get pixelated

you can use https://tinypng.com/ as mentioned in the task to do that

or any software you like or use any online service

hope that help and have a nice day

[Keyboardguy]

Hello,

Thank you very much for the feedback!

I can now see why my page didn’t look as intended. But, I found out something weird. The image in the assets bit of my code is definitely 600px wide, but when it renders on the glitch page it gets shrunk down to 330px wide (i used inspect to check). I also used tinypng on the 600px image and it still got shrunk to 330px wide on the preview. I have no idea why this is happening.

Thanks, Keyboardguy

[justsomeone]

you very welcome @Keyboardguy

not sure which image you talking about if you talking about the small version of the panda image
this one

then cause the image size 330 × 267 pixels

and the other image for the panda from your assets

it’s size is 330 × 134 pixels

or i am miss understanding something

[Keyboardguy]

Hello,

Sorry if I worded it a bit weird. I can show you with pictures:

The image in the assets folder (for me) is 600 pixels wide.

It is also 600 px wide when I open up the picture in the assets folder.

But when I load this image into the preview pane, it becomes 330px wide.

It also becomes 330 px wide when loaded into a different page.

Finally, where it says ‘current source’ in the previous picture, I checked it and the source itself has shrunk down to 330px.

I hope that clears up what I’m saying, but it could just be my computer doing this.

Thanks, Keyboardguy

[justsomeone]

Hello @Keyboardguy

do not be sorry

i see there issue on how the glitch calculate the image size here my image viewer

you can upload the image on this site also

https://resizeimage.net/

and you will see it report that the image is same size as in my screen shoot

so i guess you could report a bug to glitch so they fix it

hope that help and have a nice day

[Keyboardguy]

Hello,

Thanks for the reply - I’m glad that I’m not the only one who has this bug. I’ve reported the bug to glitch.

Thanks, Keyboardguy

[justsomeone]

Hello @Keyboardguy

looks like i was wrong the issue that we use the thumbnail of the image not
the image it self

your link is https://cdn.glitch.global/347d6179-2ccb-4e22-be03-0dcf589328ad/thumbnails%2Fred-panda-close-600px.jpg?1655054736919

but it should be

https://cdn.glitch.global/347d6179-2ccb-4e22-be03-0dcf589328ad/red-panda-close-600px.jpg?v=1655152922159

we should click on the copy url button or copy the url above it

that was our issue

so update the link and it will work fine you can confirm it and contact gitch and this one on me sorry

and have a nice day