CSS

how to make website responsive with css

/* Instead of using px measurements, use % when setting width or height.*/
/* The % is calculted from the width of the parent element.*/
#NonResponsiveWidth {
	width: 1080px;
    height: auto;
}
#responsiveWidth {
	width: 85%;
    height: auto;
}
/*For text, use vw (viewport-width) instead of px when setting font-width*/
#NonResponsiveText { font-size: 20px; }
#responsiveWidth { font-size: 10vw; }

how to make responsive website using css

/* 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 
*/

responsive web design with html5 and css

// media queries example

	/* wide laptop */
@media screen and (max-width: 1200px) {
	.home-hero-image {
		height: 50vh;
	}
}

/* small laptop */
@media screen and (max-width: 900px) {
	.home-hero-image {
		height: 60vh;
	}
	.hero-text-home {
		margin-top: 25px;
	}
	.hero-school-home-image {
		width: 40%;
	}
}

how to create responsive website using css

#using media queries
#use rem, em ,% instead of px in CSS