Use custom CSS to display IDX Broker results and the map side by side on the Results page.

This example is intended for the Mobile First Results template.

Requirements

Before using this CSS:

• The Results page must use the Mobile First Results template.
• The Results page must be configured to always display the map.
• This CSS should be added to the Results Page Category custom CSS area.

Example CSS

.IDX-wrapper-standard #IDX-resultsMap {
    float: right;
    width: 75%;
    height: 1000px;
}

div#IDX-resultsContent {
    width: 25%;
    height: 1000px;
    overflow-y: auto;
    min-width: 350px;
}

What This CSS Does

This CSS:

• Moves the map to the right side of the page
• Sets the map width to 75%
• Sets the results content width to 25%
• Adds vertical scrolling to the results column
• Sets a fixed height of 1000px for both sections

Important Notes

Note: This example is not fully responsive by default.

You may need to adjust the CSS for:

• mobile layouts
• tablet layouts
• shorter screens
• theme or wrapper conflicts
• different IDX templates

Suggested Responsive Adjustment

You can add a media query to stack the results and map on smaller screens:

@media screen and (max-width: 900px) {
    .IDX-wrapper-standard #IDX-resultsMap,
    div#IDX-resultsContent {
        float: none;
        width: 100%;
        min-width: 0;
        height: auto;
    }
}

Best Practices

• Test the layout on desktop, tablet, and mobile.
• Confirm the map remains usable after the layout change.
• Avoid fixed heights if the site needs a more flexible responsive layout.
• Use browser developer tools to adjust widths and breakpoints.