So I have my website and it seems to be working on my laptop(besides the media query) but I can’t get it to work on mobile perfectly. How can I get it to work on mobile?
Website link
GitHub Code Link
My GitHub contains both the css, and html code yet there are errors I can’t figure out. Everything seems to be out of place… I really need some help please. I can’t figure out my mistakes. Can someone please check out my GitHub code and check the codes? I’m constantly trying to fix it with position:relative, position:absolute, and constantly trying to get my images to stay in place using img{}. I’m trying to get it the same way it looks on the laptop but compatible to mobile.
2
Answers
There is a lot of things in your Css code that is not compatible with responsive mode :(. If you want to make it responsive it’s necessary to check all of your code (for exemple: use flex box and not float)
I don’t know your level with CSS but I think it would be better if :
Happy coding !
Like the person before me answered/suggested, it would be good practice to create your website based on some frontend framework, like BootStrap (it’s more like a huge CSS library, but it’s described sometimes as a framework).
BootStrap has in-built functionality for responsive widgets – they change size based on current resolution of your Web Browser. Here is a good example from the official site: https://getbootstrap.com/docs/5.3/examples/headers/
BootStrap operates mostly on
<div>elements,so editing simple pages for it to work shouldn’t be tiring.
Plus, even simple elements have good aestethic, try it out 🙂