Starting a css site but format issues

Question

The link of the site is here progerdevs.co.nf just a test site. When I load the page on my android it is displayed horribly, everything is all over the place. Does anyone know what it is called so it changes when theres a different screen size? I still have a lot to learn :/ By changes i mean for example the images are all displayed verticaly and also the top navigation bar.

Answer 1

You must be talking about media queries. Suppose you want to change how your site looks depending on a set of screen resolutions like (width)
320px
768px
1024px

Then you must define a media query for each resolution, and put in it all your css rules for any element you want to adapt. Example: you want to change font-size of all your document:

@media screen and (min-width:0px) {
    body {
        font-size:10px;
    }
}

@media screen and (min-width:320px) {
    body {
        font-size:12px;
    }
}

@media screen and (min-width:768px) {
    body {
        font-size:14px;
    }
}

@media screen and (min-width:1024px) {
    body {
        font-size:16px;
    }
}

Depending on the screen resolution of your device, font-size will change, so you can do the same with any property of any HTML element.

Or you can use Bootstrap, but that requires a deeper knowledge.

Answer 2

Yes, better you follow previous answer but here is a quick solution. Add this code and it will work as well

.jumbo2 .jumbotron {
  background-image:url(http://progerdevs.co.nf/elderly.jpg);
  background-repeat:no-repeat;
  background-size:cover;
}

I just remove the height;

Thanks