my code stock.com

Jamie Cookson

Responsive Media Queries
by Jamie Cookson

1301+
1300 - 1181
1180 - 1085
1084 - 960
959 - 769
768 - 561 - full width
560 - 480
479 - 321

Add min-width: 320px; to body

Snippet options

Download: Download snippet as responsive-media-queries.css.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

/**
 * Media queries and respsonsive styles
 * 
 */


/** 1181 -> 1300 */
	@media only screen and (max-width: 1300px) { 

	}

/** 1085 -> 1180 */
	@media only screen and (max-width: 1180px) {

	}

/** 960 -> 1084 */
	@media only screen and (max-width: 1084px) {

	}

/** 769 -> 959 */
	@media only screen and (max-width: 959px) {

		/** General */
			.container {
				padding-left: 1em;
				padding-right: 1em;
			}

	}

/** 561 -> 768 */
/** full width */
	@media only screen and (max-width: 768px) {

		/** Navigation */
			#site-navigation a.toggleMenu {
				display: inline-block;
			}
			#site-navigation {
				text-align: right;
				width: 100%;
			}
			#site-navigation ul {
				margin: 0;
				padding: 0;
				clear: both;
				width: 100%;
				list-style: none;
			}
			#site-navigation li {
				width: 100%;
				margin: 0;
			}
			#site-navigation li a {
				display: block;
				width: 100%;
			}
			.menu {
				text-align:left;
				display: none;
			}
			#site-navigation ul ul a {
				background-color: #444;
				color: #fff !important;
				width: 100%;
			}
			#site-navigation ul ul {
				display: block;
				width: 100%;
			}
			#site-navigation li:hover ul,
			#site-navigation li li:hover ul {
				position: static;
				display: none;
			}
			#site-navigation li.hover ul,
			#site-navigation li li.hover ul {
				position: static;
				display: block;
			}
			#site-navigation li .parent::after {
				font-family: "FontAwesome";
				font-style: normal;
				float: right;
				margin-right: 30px;
				content:"\f107";
			}
			#site-navigation li.hover .parent::after {
				content:"\f106";
			}

		/** Navigation Toggle */
			#nav-control { }
			.lines-button {
				background: transparent;
			}
			.lines-button:hover { }
			.lines-button:active {
				transition: .2s;
			}
			.lines {
				display: inline-block;
				width: 25px;
				height: 3px;
				background: #F16529;
				position: relative;
				float: right;
			}
			.lines:before,
			.lines:after {
				width: 25px;
				height: 3px;
				background: #F16529;
				transition: 0.2s;
				position: absolute;
				left: 0;
				content: '';
			}
			.lines:before {
				top: 6px;
			}
			.lines:after {
				top: -6px;
			}
			.lines-button.x .lines {
				transition: background 0.2s ease 0.3s;
			}
			.lines-button.x .lines:before, .lines-button.x .lines:after {
				-ms-transform-origin: 50% 50% 0;
				/* IE 9 */
				-webkit-transform-origin: 50% 50%;
				transform-origin: 50% 50%;
				transition: top 0.2s 0.3s ease, -webkit-transform 0.3s ease;
				transition: top 0.2s 0.3s ease, transform 0.2s ease;
			}
			.lines-button.x.active .lines {
				background: none repeat scroll 0 0 transparent;
				transition: background 0.2s ease 0s;
			}
			.lines-button.x.active .lines:before, .lines-button.x.active .lines:after {
				top: 0;
				transition: top 0.2s ease, -webkit-transform 0.2s 0.3s ease;
				transition: top 0.2s ease, transform 0.2s 0.3s ease;
				width: 25px;
			}
			.lines-button.x.active .lines:before {
				-webkit-transform: rotate3d(0, 0, 1, 45deg);
				transform: rotate3d(0, 0, 1, 45deg);
			}
			.lines-button.x.active .lines:after {
				-webkit-transform: rotate3d(0, 0, 1, -45deg);
				transform: rotate3d(0, 0, 1, -45deg);
				transform: rotate(-45deg);
			}
			.mobile-icons {
				display: block;
			}
			#site-navigation a.mobile-icon {
				color: #eee;
			}
	
	}

/** 480 -> 560 */
	@media only screen and (max-width: 560px) {

	}

/** 0 -> 479 */
	@media only screen and (max-width: 479px) {

	}

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.