jonnykates
9/22/2017 - 9:17 AM

Better responsive listing layouts

Better responsive listing layouts

@media screen and (max-width: 768px){
	.listing .listedPost:not(.listedFundraiser){
		width: calc(50% - (#{$gutter-width} / 2));
		float: none;
		padding: 0;
		margin-bottom: $gutter-width;

		&:nth-of-type(3n+3) {
			margin-right: $gutter-width;
		}

		&:nth-of-type(2n+2) {
			margin-right: 0;
		}
	}

	.content.listContent.mapResultList .listingBanner {
		float: none;
		width: 100%;
		margin: 0 0 20px 0;
	}
}

@media screen and (max-width: 540px) {
	.listing .listedPost:not(.listedFundraiser) {
		width: 100%;
		margin-right: 0;

		&:nth-of-type(2n),
		&:nth-of-type(3n) {
			margin-right: 0;
		}

		// .listed-post-image-link {
		// 	flex-shrink: 1;
		// }
	}
}