/* instead of using px for with and height use % */
/* % from the parent element fx. parent element has 100 px and the chiled
element has 50% then it will be like it has 50px */
.NonResponsiveParent{
width: 100px;
height: 100px;
}
.responsiveChild{
width: 50%; /* 50px */
height: 50%; /* 50px */
}
/* now if you want it to work better on other screens then your own,
the best way is using this with media querys.
media query is where you give your site a braiking point that says when you
get this amount of px the website will use this css
*/
/*example*/
body{
background-color: red;
}
/* this is the normal background color */
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
/*
and this is the background color when the site with gets to 600px and under
*/