Hello, could someone please assess this?
Link to task: Challenge: Mozilla splash page - Learn web development | MDN
Link to my code:
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
Hello @Keyboardguy
you doing great well done here are my notice
the href / rel /type values in the link element should be wrapped by double quote not single quote
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
1 Like
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
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
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
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
Crop, resize images in JPEG|PNG|GIF format to the exact pixels or proportion you specified, compress them to reduce the file sizes, making it easy to use them as your desktop wallpaper, Facebook cover photo, Twitter profile photo, avatar icons, etc.
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
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
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