What kind of length parameters should be used to make your website portable for any kind of device.

Question

i made a webpage given below.
It is looking good on mobile device but on pc it is
making a lot of mess what should I do to make it more portable of any kind of device.

this is my code below.

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

Answer 1

there are at least 2 different methods:
1 - using twitter bootstrap
2 - using media query

i will make a little brief for both of them... with bootstrap your tags will have class like "col-lg-5 col-sm-12" inside a .row that it is inside a .container.
what does it mean? try to imagine your web page like a CONTAINER, this is divided in different ROWs and each of them has a structure of 12 COLumns... with my example i've said that the element with col-lg-5 and col-sm-12 classes will take 12 columns of a row when your browser width is sm (551px-771px if i'm not wrong) and 5 columns of a row when width is lg(991px- 1200px).

in the second case you can use media queries inside your css file.
you can specify a max-width for example, so every properties you will write inside the media query will be valid only if the browser width is <= max-width you use. e.g.
@media( max-width:551px ){
body{
background-color:rebeccapurple;
}
}

in this case from 0px to 551px your background will be purple.

Answer 2

u want to create by using bootstrap framework

Answer 3

or use width 650-750px to normal view