LoopNet Seo Pages Responsive Hack

SEOResponsive.css

/* To find overflows */
/* * { border: 1px solid red; } */


.maincontent, 
.Footer,
.site-header nav,
.SEOHeader {
    max-width: 960px;
    width: auto!important;
}
/* Hide some stuff for demo purposes */
#logInState {
    display: none;
}
 
@media (max-width: 1024px) {
	body {
		font-size: 14px;
	}
    
    
    .site-header nav { margin: 20px 0; }
    .site-header .brand {
    	margin-left: 1rem;
        width: 50%;
        float: left;
        margin-top: 0;
    }
    .menu {
    	width: 50%;
        float: left;
    }
    .seoListingsContainer { 
		width: auto;
		float: none; 
	}
    .seoListings {
    	width: auto;
    }
	.listingContainer, 
    .listingContainerHover {
    	width: auto;
		padding: 1rem 0;
        font-size: 0;
    }
	.seoHeader { padding: 0 1rem; }
    .SEOHeader .SEOMeta {
    	width: 70%;
        padding: 0 1rem;
        margin: 0;
        box-sizing: border-box;
    }
    .SEOHeader .socialPlugin {
    	width: 30%;
        float: left; 
    }
    .seoListingsTitle { padding: 0 1rem; }
    .seo.breadCrumbs { 
    	padding: 0 1rem;
        margin: 0;
    }
    .seo.breadCrumbs a {
    	font-size: 1rem;
    }
    .breadCrumbsItem dl { 
    	top: 35px; 
    	width: 200px;
    }
    .breadCrumbsItem dl dt { font-size: 1rem; }
    .container.quickSearchContainer {
    	margin-bottom: 0;
    }
    /* Sort Dropdown */
    .seo.resultsSorting {
    	margin: 0;
        padding: 6px 1rem 0 0;
    }
    .seo.resultsSorting a {
    	font-size: 1rem;
    }
    .sortDropdown { top: 26px; }
    /* Listing Stuff */
	.listingPhoto, 
	.listingDescription,
	.listingLabels,
	.listingStats { 
		box-sizing: border-box;
		margin: 0;
		padding: 0  0 0 1rem;
        float: none;
        display: inline-block;
        vertical-align: middle;
	}
	
	.listingPhoto { width: 20%; }
	.listingPhoto img { width: 100%; height: auto; }
	
	.listingContainer .listingDescription,
	.listingContainerHover .listingDescription { 
			font-size: .9rem;
			width: 50%; 
            vertical-align: top;
	}
	.listingDescription .listingTitle { font-size: 1rem; }
	
	.listingContainer .listingLabels, 
	.listingContainer .listingStats,  
	.listingContainerHover .listingLabels, 
	.listingContainerHover .listingStats { 
    	vertical-align: top;
    	font-size: .78rem; 
    }
	.searchResultPhotoLabel {
    	left: 17px;
    }
	.listingLabels { width: 15%; }
	.listingStats { 
    	width: 15%;
        font-weight: bold;
    }
	
    .searchPaging {
    	padding: 0;
        margin: 1rem  0;
    }
    .upsellBox2Top { 
    	width: auto;  
        margin: 0 0 1rem 0; 
    }
    .upsellBox2Content {
    	padding: 0 1rem;
    }
    .upsellBox2Container {
    	margin: 0 0 1rem 0;
    }
    
	/* SideBar */
	.browseBoxContainer {
		float: none;
        padding: 1rem;
        margin: 0;
	}
    .seoBlueSideBar {
    	width: auto;
        overflow: auto;
    }
    .seoBlueSideBarHeader, .seoBlueSideBarList {
        padding: 0;
        margin: 0;
    }
    .seoBlueSideBarList {
    	box-sizing: border-box;
        padding: 0 1rem; 
    }
    .seoBlueSideBarList a { font-size: 1rem; }
    .seoBlueSideBarHeader {
    	float: none;
    }
    .propTypeList { 
    	width: 100%;

    }
	.propTypeList br { display: none; }
    .propTypeList a {
        display: inline-block;
        width: 50%;
        box-sizing: border-box; 
        margin: 0 0 .25rem 0;
    }
    .propTypeList a:hover {
    	font-size: 1rem;
    }
    
    
}

/* Iphone 6 Demo Purposes */ 
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) {
  	html, body {
		font-size: 16px;
        text-size-adjust: 100%; 
        -ms-text-size-adjust: 100%; 
        -moz-text-size-adjust: 100%; 
        -webkit-text-size-adjust: 100%; 
	}
    /* For Demo purposes lets hide some stuff */
    .container.quickSearchContainer,
    #logInState,
    .socialPlugin,
    .seodynamic,
    #iPhonePromo,
    .Footer {
    	display: none;
    }
    .site-header {
    	margin: 0;
    }
    .site-header .logo {
    	width: 400px;
        height: 120px;
        display: block;
        margin: 0 auto;
        float: none;
    }
    .site-header .brand h2 {
    	display: block;
        margin: .5rem;
        text-align: center;
    }
    .site-header .brand,
    .menu,
    .SEOHeader .SEOMeta,
    .SEOHeader .socialPlugin,
    .seo.breadCrumbs,
    .seo.resultsSorting {
    	width: 100%;
        float: none;
    }
    .seo.breadCrumbs a {
    	font-size: 2.3rem;
        z-index: 1;
    }
    
    .breadCrumbsItem.seo {
    	z-index: auto;
    }
    .breadCrumbsItem {
    	float: none;
    }
    .breadCrumbsItem dl {
    	width: 100%;
        z-index: 1000;
        top: 75px;
        box-sizing: border-box;
        max-height: 400px;
    }
    .seo.resultsSorting {
    	clear: both;
        padding: 1rem;
    }
    .seo.resultsSorting a {
    	width: 100%;
        display: block;
        text-align: left;
    }
    .sortDropdown {
    	width: 100%;
        box-sizing: border-box;
    }
    .seo.resultsSorting .sortDropdown a {
    	font-size: 1.6rem;
    }
    .seo.resultsSorting .arrow.down,
    .breadCrumbsItem strong a .arrow {
    	border-width: 12px;
    }
    .breadCrumbsItem strong a .arrow{
        right: -10px;
    	top: 23px;
        float: right;
    }
    .SEOMeta h1 {
    	font-size: 1.2rem;
    }
    .SEOMeta h2 {
    	font-size: 1rem;
    }
    
	.listingContainer, 
    .listingContainerHover {
    	width: 100%;
		padding: 1.2rem;
        margin: 1.2rem 0;
        box-sizing: border-box;
        float: none;
        border-bottom: 3px solid #ff0000;
    }
    .listingPhoto, 
	.listingDescription,
	.listingLabels,
	.listingStats { 
		box-sizing: border-box;
		margin: 0;
		padding: 1rem;
        float: none;
        display: block;
	}
    
    .listingPhoto {
    	width: 100%;
    }
	.listingContainer .listingDescription, 
    .listingContainerHover .listingDescription {
    	width: 100%;
        font-size: 1.2rem;
    }
	.listingContainer .listingLabels, 
	.listingContainer .listingStats,  
	.listingContainerHover .listingLabels, 
	.listingContainerHover .listingStats {
    	width: 50%;
        font-size: 2.1rem;
        float: left;
    }
    .upsellBox2Top.container.primary {
    	padding: 2rem;
    }
    .upsellBox2Top p {
    	float: none;
        width: auto;
        line-height: 2rem;
    }
    .subHeaderStyleButton { 
    	float: none;
        padding: 2rem 0 0 0;
    }  
    .subHeaderStyleButton .button.large.secondary {
    	display: block;
        float: none;
        padding: 2rem;
    }
    .searchPaging {
    	clear: both;
        padding: 1rem;
    }
    .searchPaging a.button.tiny, .searchPagingLN a.button.tiny {
    	font-size: 2rem;
        padding: 1rem;
        margin: 0 0 0 1rem; 
    }
    .propTypeList a {
        display: block;
        float: none;
        font-size: 1.2rem;
        width: 100%;
        line-height: 4.2rem;
    }
    .searchPaging span a, 
    .searchPaging span strong, 
    .searchPagingLN span a, 
    .searchPagingLN span strong {
    	padding: 1rem;
    }
}