Responsive Design / media query section of Advokat Eden stylesheet.

Responsive CSS for Advokat Eden

/* Responsive Design
------------------------------------------------------------ */

@media only screen and (max-width: 1200px) {

  .wrap, 
  #header {
		width: 960px;
	}

	#content {
		width: 560px;
	}

	.post-type-archive-portfolio .portfolio {
		width: 280px;
	}

}

@media only screen and (max-width: 1023px) {

	body {
		font-size: 16px;
		margin: 0 auto;
		width: 100%;
	}
	
	p {
		font-size: 16px;
	}
	
	.archive-page,
	.content-sidebar #content,
	.content-sidebar-sidebar #content,
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.full-width-content #content,
	.menu-primary,
	.menu-secondary,
	.minimum-landing .wrap,
	.sidebar,
	.sidebar-content #content,
	.sidebar-content-sidebar #content,
	.sidebar-sidebar-content #content,
	.wrap,
	#content-sidebar-wrap,
	#footer .creds,
	#footer .gototop,
	#footer-widgets .wrap,
	#header,
	#header ul.menu,
	#header .widget-area,
	#sidebar-alt,
	#title-area {
		width: 100%;
	}

	.menu-primary,
	.menu-secondary,
	#description,
	#footer .creds,
	#footer .gototop,
	#header ul.menu,
	#header .search-form,
	#title,
	#title-area {
		float: none;
		text-align: center;
	}

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	#header .search-form,
	#wrap {
		margin: 0;
	}

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	#content,
	#description,
	#footer-widgets .wrap,
	#header .widget-area,
	#title,
	#title a,
	#title a:hover,
	#header .search-form,
	#title-area {
		padding: 0;
	}

	#header {
		background-size: contain !important;
	}
	
	#title {
		margin: 10px 0 0;
	}

	.menu-primary li,
	.menu-secondary li,
	#header ul.menu li {
		display: inline-block;
		float: none;
	}
	
	.menu-primary a,
	.menu-secondary a,
	#header .menu a {
		border: none;
		padding: 10px;
	}

	a.page-title-button,
	.menu li.right {
		display: none;
	}

	.menu li li {
		text-align: left;
	 }

	 #page-title {
		 padding: 10px 0;
	 }

	#page-title p {
		font-size: 24px;
		text-align: center;
	}

	.minimum #inner,
	#inner {
		padding: 20px;
	}

	.minimum #inner .wrap {
		padding: 30px 0;
	}

	.post-type-archive-portfolio .portfolio {
		margin: 10px 15px;
		width: 45%;
	}

	.single-portfolio img {
		border: none
	}

	#footer-widgets .widget {
		padding: 20px 20px 0;
	}

	#footer .custom-footer li {
		margin: 0 10px;
	}

	#footer .wrap {
		box-sizing: border-box;
		padding: 25px 10px 0;
	}

}

@media only screen and (max-width: 768px) {

  .header-image #title-area {
    height: 270px;
  }

}

@media only screen and (max-width: 600px) {

	#home-featured {
		padding: 30px 0 0;
	}

	.home-featured-1,
	.home-featured-2,
	.home-featured-3,
	.home-featured-4 {
		padding: 0 0 30px;
		width: 50%;
	}

	.genesis-grid-even,
	.genesis-grid-odd {
		width: 100%
	}

	.post-type-archive-portfolio .portfolio {
		margin: 0 0 20px;
		text-align: center;
		width: 100%;
	}

	.portfolio-featured-image a img,
	.portfolio-featured-image a img:hover {
		border: none;
	}

	.five-sixths,
	.four-fifths,
	.four-sixths,
	.one-fifth,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fifths,
	.three-fourths,
	.three-sixths,
	.two-fifths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		padding: 0;
		width: 100%;
	}

	.navigation li a,
	.navigation li.disabled,
	.navigation li a:hover,
	.navigation li.active a {
		padding: 5px 10px;
	}

}

@media only screen and (max-width: 480px) {

  .header-image #title-area {
    height: 163px;
  }

}

@media only screen and (max-width: 320px) {

  .header-image #title-area {
    height: 107px;
  }

}

@media only screen and (max-width: 300px) {

	.home-featured-1,
	.home-featured-2,
	.home-featured-3,
	.home-featured-4 {
		padding: 0 0 30px;
		width: 100%;
	}

}