If you’ve set up Easy Property Listings (EPL) on your WordPress site and thought “this works, but it doesn’t look great” — you’re not alone. EPL is deliberately minimal in its default styling so it works with any theme, which is smart design thinking. The trade-off is that out of the box, the listing archive and property cards often need a visual lift before they look polished enough to impress potential buyers or tenants.
The good news is that a handful of CSS rules will make a significant difference, and you don’t need to touch a single template file to do it.
Before you start — where to add custom CSS in WordPress 6.9
Before adding any CSS, you need to know where to put it. WordPress 6.9 gives you two options depending on your theme type.
If you’re using a classic theme (like GeneratePress, Astra, or a custom theme):
Go to Appearance → Customise → Additional CSS. Paste your CSS in the panel on the left and click Publish. Changes apply immediately and survive theme updates.
If you’re using a block theme (like Twenty Twenty-Five):
Go to Appearance → Editor → Styles (the half-circle icon in the top right) → Additional CSS. The same rules apply — paste, save, done.
Either way, your CSS lives separately from the theme files and won’t be wiped out when EPL or your theme updates. If you’re making larger structural changes to EPL templates, a child theme is the right approach — but for layout tweaks and visual improvements, Additional CSS is the right tool.
Improving the listing card grid layout
By default, EPL outputs listing archives in a simple stacked list or a basic grid depending on your theme. The cards often have inconsistent spacing and don’t always sit evenly alongside each other.
EPL uses the class `.epl-listing-post` on each listing card and wraps the archive in `.epl-archive-listing`. The following CSS converts the archive into a clean three-column grid with consistent spacing and a subtle card shadow:
css
/* Three-column grid for EPL listing archive */
.epl-archive-listing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding: 0;
}
.epl-listing-post {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
overflow: hidden;
display: flex;
flex-direction: column;
}This gives you a clean, evenly spaced grid that looks intentional rather than default.
Fixing property image ratios
One of the most common visual problems with EPL listing archives is inconsistent image heights. When vendors upload photos at different sizes, the cards end up with images of different heights — which makes the grid look uneven and unprofessional.
EPL wraps listing thumbnail images in `.epl-listing-thumbnail`. The following CSS enforces a consistent aspect ratio regardless of the original image dimensions:
```css
/* Three-column grid for EPL listing archive */
.epl-archive-listing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding: 0;
}
.epl-listing-post {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
overflow: hidden;
display: flex;
flex-direction: column;
}`object-fit: cover` crops the image to fill the container without stretching or distorting it, the same way a well-designed property portal handles images. `aspect-ratio: 16 / 9` works reliably in all modern browsers and is supported in WordPress 6.9’s default environment.
Improving typography and price display
The property price is the most important piece of information on a listing card and it should look that way. EPL outputs the price inside `.epl-listing-price`. The bedrooms, bathrooms, and car space icons sit inside `.epl-meta-icon` elements within `.epl-listing-data`.
The following CSS makes the price prominent and tidies up the meta row:
```css
/* Make the price stand out */
.epl-listing-price {
font-size: 1.25rem;
font-weight: 700;
color: #1a1a1a;
margin: 12px 16px 4px;
}
/* Clean up the listing meta icons row */
.epl-listing-data {
display: flex;
gap: 16px;
padding: 8px 16px 16px;
font-size: 0.875rem;
color: #555;
align-items: center;
}
.epl-meta-icon {
display: flex;
align-items: center;
gap: 4px;
}
```Adjust the `color` values to match your brand colours. The `#1a1a1a` used here for price is near-black — strong enough to draw the eye without being harsh.
Quick wins for mobile display
The three-column grid looks great on desktop but needs to collapse gracefully on smaller screens. Add this media query below your other CSS to stack cards to a single column on phones and two columns on tablets:
```css
/* Tablet: two columns */
@media (max-width: 1024px) {
.epl-archive-listing {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile: single column */
@media (max-width: 640px) {
.epl-archive-listing {
grid-template-columns: 1fr;
gap: 16px;
}
}
```While you’re there, check that the contact and view listing buttons are large enough to tap comfortably on a phone. A minimum height of 44px on any button is the WCAG 2.1 AA target size requirement and good practice regardless.
```css
/* Ensure buttons are tap-friendly on mobile */
.epl-listing-post .epl-btn,
.epl-listing-post a.btn {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 0 20px;
}
```Testing your changes before going live
Before adding anything to your live site, use your browser’s developer tools to preview CSS changes first. In Chrome or Edge, right-click any element on your EPL listing page, choose Inspect, and paste your CSS into the Styles panel. Changes appear instantly and disappear on refresh — a safe way to experiment without touching the site.
To check how your grid looks on mobile, open DevTools and click the device toolbar icon (or press Ctrl+Shift+M on Windows, Cmd+Shift+M on Mac). You can preview your layout at any screen width before committing.
Once you’re happy with how things look, paste the final CSS into Additional CSS in WordPress and save.
If you want to go further — custom listing templates, a bespoke property detail page layout, or a fully branded EPL integration that matches your agency’s identity — that’s where custom template development comes in. We build tailored EPL setups for real estate agencies across Australia.
