1. How can I make the images on my code be visible here 2. The output of my code is scattered when viewed on mobile. Why's that?

Question

https://code.sololearn.com/WGeE2s53dAz7/?ref=app

Answer 1

Your images have src set to:
- images/yemi.png
- images/Graphic1 copy.png
- images/download.png
- and so on.
That doesn't work in Sololearn's Code Playground because you can't upload images like that here. If you want images to work in Sololearn's playground, see my answer at: https://www.sololearn.com/Discuss/1924077/can-we-add-images-in-sl

The reason things like your menu get wrapped and looks bad on the phone is that you didn't make your layout responsive. It has the same wide content even when the browser is very narrow. Consider using something like:
- Bootstrap's Grid System( https://getbootstrap.com/docs/4.0/layout/grid/ )
- CSS features like width-specific media queries explained at https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/
- CSS units like %, vmin, vw... so some of your content scales based on available width
- Set the viewport settings in a meta tag like this: https://www.w3schools.com/css/css_rwd_viewport.asp

Test the responsiveness by resizing the width of your browser to very narrow. I try to make all of my sites look pretty good from 1400 pixels wide down to 400 pixels to simulate devices from desktops, laptops, down to tablets, and smart phones.

Answer 2

Alright. Thank you