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