Good day guys, i just performed the project on the mozilla splash page ( based on responsive images using html). i used the sublime text editor to perform my own version of the test and it worked fine on my browser but how do i get to test its responsiveness on a phone with a smaller viewpoint width? Here is a link to the project after i have worked on it project worked
Hi there @nonso!
In terms of testing it on a smaller viewport width, Firefox’s responsive design mode can be pretty helpful. It has been updated recently so that it behaves more like a real mobile on small screen sizes.
Alternatively, you could always use remote debugging to connect a phone to Firefox desktop, and then you can inspect the page as it is loaded in the phone, using the desktop dev tools. See here for help on that: https://developer.mozilla.org/en-US/docs/Tools/about:debugging#Setup_tab
BTW, your link didn’t work — were you attempting to show us your project work, and can you provide the correct link? I’m more than happy to have a look.
Thanks for your quick response to my problem, and the solutions you recommended were totally helpful. #gratitudes
And yeah i tried to show my project work with the link i attempted uploading , i am sorry it didn’t work. I am new to github so am still trying to find my way to do stuffs around it (like to link ), i know it sounds embarrassing.
There is no need to be embarrassed; Git in particular is really unfriendly when you are first starting to learn it.
There are no stupid questions here — we are really patient and friendly to beignners. Let me know how else I can help.
Thanks for being kind. i really would want to know how to link my codes so i could easily share for future assessments or corrections
OK, let’s try to figure it out.
Have you got your code successfully put onto GitHub? If so, what URL is it at?
Have you got GitHub pages activated for your GitHub repo?
If so, you should be able to access your example through a URL beginning
here is the URL of my github page with the codeGithub page hope it works
@nonso cool, this link works fine, so I can now see your source code.
What would be even more helpful is if I could also see your code running live on GitHub. To do this, you need to follow the instructions at https://guides.github.com/features/pages/.
After you have got GitHub pages up and running, your example should be available live at a URL along the lines of https://nonso2020.github.io/hello-world/
@nonso excellent, thanks! I can now see your example running live.
The reason your images aren’t loading is that you haven’t uploaded them to your github repo.
If you look at your source code, your
src attributes just contain the name of the image you want to embed, so this means the browser will look for the image files inside the same directory as the HTML file that they will be embedded in.
<img src="firefoxlogo120.png" alt="firefox logo" title="logo">
But if you look at your directory, you’ll see that there are no image files in here: https://github.com/Nonso2020/hello-world
You need to upload the image files into the same directory as the HTML file.
This looks perfect, well done!
When I load the page with a wide browser window and look at the DevTools network inspector, it shows me that the 400px small images are loaded. In a narrow window, it loads the 120px small images, so that is perfect.
And in a wide browser window, the landscape panda picture loads, but on a narrow window, the portrait page picture loads.
This is all perfect, well done on a great job.
thanks for putting me through boss
Hi @chrisdavidmills i hope this message finds you well. I have been stuck on a web page am try to design and would need your assistance.
@nonso it depends what you are trying to design. I don’t have much free time, but I can probably help with a bit of advce, and maybe links to good tutorials to help.
Thanks boss. I was having a hard time with the css grid and layout, but i eventually figured it out. Any helpful link would still be appreciated. Gratitude.
Hi MDN Team,
Hope everyone is well. I would greatly appreciate if you can help me with an assessment for the Mozilla Splash Page. I used Sublime Text to formulate the HTML according to the lessons and the initial web page comes out fine but the images are not responsive. I am using Chrome and have disabled the cache as well on the Dev Tools to view the Responsive Images but still no luck.
Can you kindly review my work which I have uploaded to:
Your help is extremely appreciated, thank you.
Hi there @ishahryar! I am not too bad thanks; hope you are ok too.
You are definitely on the right track here; I am surprised that none of this is working. Try having a look at our version and comparing to yours: https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-finished/index.html
Also be aware that you may not see the changes dynamically as you drag the viewport bigger and smaller. It may require a page reload. You’ll be able to tell whether the
<picture> element is working correctly as the loaded image will be obviously different.
For the srcset images, you’ll have to have your browser’s network monitor tool open, and observe which image files are being loaded.
Thanks Chris you are a star. I will give it a GO and revert back.