/* ========================================================================== Bentlaire - Widen the [listing] results grid on /sale/ Based on the reference site's own rule (ypa.com.au, which also runs EPL): .epl-listing-posts { max-width: 1200px; margin-left: auto; margin-right: auto; } Widened further per the client's own preference: max-width 1500px. On their site that rule alone is enough because their listing wrapper already sits inside a full-width ancestor. Here, .loop-content sits inside Divi's standard ~1080px boxed "section" (the same width as the search bar above it), so a plain max-width would just get clamped to that ~1080px and never reach 1500px. To get the same visual result we first break the element out to the full viewport (the same 100vw + left:50% + negative-margin technique used for the property gallery - safe here since this row has no sidebar next to it, via the et_no_sidebar body class), then use padding to reproduce "max-width:1500px; margin:auto" against the viewport instead of the narrower Divi container: padding grows to keep content capped at 1500px on wide screens, and shrinks to 0 (edge-to-edge) below that, exactly mirroring what margin:auto + max-width would do on an unconstrained parent. NOTE: .page-id-241 is bentlaire.com's own page ID for /sale/. WordPress automatically adds a page-id- class to - replace 241 below (in all THREE rules in this file) with your own listings page's ID. ========================================================================== */ .page-id-241 .loop-content.epl-template-blog { width: 100vw; position: relative; left: 50%; margin-left: -50vw; box-sizing: border-box; padding-left: max(0px, calc((100vw - 1500px) / 2)); padding-right: max(0px, calc((100vw - 1500px) / 2)); } /* Reference site doesn't specify a mobile gutter either, but a small one here keeps cards from touching the screen edge on phones/tablets. */ @media (max-width: 900px) { .page-id-241 .loop-content.epl-template-blog { padding-left: 20px; padding-right: 20px; } } /* More breathing room between listing cards. EPL's own default is a tight 4px margin around each card (.epl-property-blog-entry-wrapper); this raises it to give clearer separation between images/cards in the grid, both horizontally (between columns) and vertically (between rows). */ .page-id-241 .epl-property-blog-entry-wrapper { margin: 14px; } /* Consistent Beds/Baths/Garage icons: reuses the exact same icon set/markup (.bentlaire-property-features, defined in property-single.css) shown under the image on single property pages, sized down to fit a grid card instead of a full-width single listing. */ .page-id-241 .bentlaire-property-features-compact { gap: 14px; padding: 10px 0 0; margin: 0; border-bottom: none; } .page-id-241 .bentlaire-property-features-compact .bentlaire-property-feature { gap: 6px; font-size: 0.85rem; } .page-id-241 .bentlaire-property-features-compact .epl-icon { width: 18px; height: 18px; }