CodePen

HTML

            
              
            
          
!

CSS

            
              /*******************************************
*
*			RESPONSIVE ITEMS
*
*******************************************/
@media only screen and (max-width: 320px) {
	/***************************************
	*			TOP NAVI
	***************************************/
	#top-navi .row { display: none; }
	#top-navi #quick-links-dd { display: block;}

	/***************************************
	*			HEADER
	***************************************/
	#header-section { height: 215px !important;}
	#header { height: 188px;}
	#ABC-Logo { width: 90% !important; margin-left: 15px !important; display: block; }

	#search-area { margin-right: 30px !important;}

	/***************************************
	*			NAVIGATION
	***************************************/
	#menu-section { height: 107px !important;}
	.perc-navbar { display: block !important; }
	.perc-navbar li { width: 50% !important; text-align: center;}
	.perc-navbar ul ul { display: none !important;}
	.sf-menu a { border: none !important; font-size: 10px !important;}

	/***************************************
	*			TAB AREA
	***************************************/
	.tab .quick-blurb { float: left; width: 100% !important;}
	.tab .link-area { float: left; width: 100% !important;}

	/***************************************
	*			CONTENT AREA
	***************************************/
	#content-section h1 { float: left !important; width: 90% !important;}
	#content-section h3 { font-size: 90% !important; }	

	/***************************************
	*			SIDEBARS
	***************************************/
	#left-sidebar, #right-sidebar, #sidebar-home { float: right; }
	#home-sidebar, #left-sidebar { width: 100% !important;}

	#Contact-Info, #Links-Area { width: 100% !important; }

	/***************************************
	*			FOOTER
	***************************************/
	.copyright { text-align: center !important; padding-left: 25px !important; }
	.coplac { float: left !important; }
	.coplac img { float: left !important; margin-left: 60px;}

	#popular-links li { display: block !important; width: 100% !important; }

}

@media only screen and (max-width: 480px) {
	/***************************************
	*			TOP NAVI
	***************************************/
	#top-navi .row { display: none; }
	#top-navi #quick-links-dd { display: block;}

	/***************************************
	*			HEADER
	***************************************/
	#header-section { height: 225px;}
	#header { height: 188px;}
	#ABC-Logo { width: 100% !important; margin-left: 25px !important; display: block; }

	#search-area { margin-right: 100px !important;}

	/***************************************
	*			NAVIGATION
	***************************************/
	#menu-section { height: 72px !important;}
	.perc-navbar { display: block !important;}
	.perc-navbar li { width: 33% !important; text-align: center; border: none !important;}
	.perc-navbar ul ul { display: none !important;}
	.sf-menu a { border: none !important; }

	/***************************************
	*			SIDEBARS
	***************************************/
	#left-sidebar, #right-sidebar, #sidebar-home { float: right; }
	#home-sidebar, #left-sidebar { width: 100% !important;}

	#Contact-Info, #Links-Area { width: 50% !important; }
	#Links-Area { margin-top: 20px !important;}


	/***************************************
	*			FOOTER
	***************************************/
	.copyright { text-align: center !important; padding-left: 105px !important; }
	.coplac { float: left !important; }
	.coplac img { float: left !important; margin-left: 140px;}
}

@media only screen and (max-width: 600px) {
	/***************************************
	*			TOP NAVI
	***************************************/
	/*#top-navi .alpha, #top-navi .omega { float: left;}*/
    #top-navi .row { display: none !important; }
	#top-navi #quick-links-dd { display: block !important;}

	/***************************************
	*			NAVIGATION
	***************************************/
	#menu-section { height: 72px !important;}
	.perc-navbar { display: block !important;}
	.perc-navbar li { width: 33% !important; text-align: center; border: none !important;}
	.perc-navbar ul ul { display: none !important;}
	.sf-menu a { border: none !important; }

	/***************************************
	*			HEADER
	***************************************/
	#header-section { height: 225px;}
	#header { height: 188px;}
	#ABC-Logo { width: 100% !important; margin-left: 60px !important; display: block; }

	#search-area { margin-right: 175px !important;}

	/***************************************
	*			SIDEBARS
	***************************************/
	#left-sidebar, #right-sidebar, #sidebar-home { float: right; }
	#home-sidebar, #left-sidebar { width: 100% !important;}

	#Contact-Info, #Links-Area { width: 50% !important; }
	#Links-Area { margin-top: 20px !important;}


	/***************************************
	*			FOOTER
	***************************************/
	#final-footer .alpha { width: 60% !important;}
	#final-footer .omega { width: 38% !important; float: right !important; }
}

@media only screen and (max-width: 800px) {
	/***************************************
	*			TOP NAVI
	***************************************/
	#top-navi .alpha { width: 40%; font-size: 12px; }
	#top-navi .omega { width: 60%; font-size: 12px; }

	/***************************************
	*			HEADER
	***************************************/
	#header-section { height: 180 px;}
	#header { height: 188px;}
	#ABC-Logo { margin-left: 90px;}

	#search-area { margin-right: 180px;}

	/***************************************
	*			NAVIGATION
	***************************************/

	/***************************************
	*			PRE-FOOTER
	***************************************/
	#Campus-Map-Holder { display: none !important;}
	.campus-map-button { display: none !important;}

	/***************************************
	*			FOOTER
	***************************************/
}

@media only screen and (max-width: 768px) {
	/***************************************
	*			TOP NAVI
	***************************************/
	#top-navi .alpha { width: 40%;}
	#top-navi .omega { width: 60%;}

	/***************************************
	*			HEADER
	***************************************/
	/* #header-section { height: 175px;} */


	#popular-links li { width: 50% !important; }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................