Make the page mobile-friendly?

Question

I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic html5 and css3 but I don't know how to make them scale up, down and mobile friendly. For example, here's one of my pages and one of my sites where you can see that it has some minor issues with zooming in and out, and it's not mobile friendly at all:

https://mitkovtori.github.io/

https://mitko-vtori-world.github.io/Mitko-Vtori-World/

So, is there a way to fix the problem with all sizes, or recreate it for mobile devices, etc.?

I tried using percentage "%" to represent the size, for example:

<width="25%">

I also tried using pixel "25px". Only the number "25".

But no matter what I do, there are always issues with zooming in, zooming out, and moving the device.

The code is 100% open source, so you can go around my crap code and try to figure out where I went wrong.

Repositories for the two websites I shared at the beginning: https://github.com/MitkoVtori/MitkoVtori.github.io

https://github.com/Mitko-Vtori-World/Mitko-Vtori-World

Answer 1

Use media queries, for example, if you want to style the screen size below 1023px, you need to add the following content at the bottom of the css file

@media(max-width:1023px){ 
   /* your code will be here */
   .navbar{
        padding: 10px 15px;
    }
}

If you want lower than 768, please do it again

@media(max-width:768px){ 
       /* your code will be here */
       .navbar{
            padding: 10px 15px;
        }
    }

Similar modes for large and small screens