Using Responsive IDX Embed Codes (instructions for older MLS®/IDX Widget accounts).
Note: All new MLS®/IDX Widget accounts after June 2024 are natively responsive. Accounts created before that date have a responsive option that is enabled by default, but can be turned off. The instructions below are for MLS®/IDX Widget accounts created before June 2024.
Our embed codes are available in 2 formats: responsive or set width. The responsive option allows the embedded IDX iFrame to dynamically resize it's width based on the width of the browser. This is the ideal option for most non-RealtyNinja websites, especially ones that are responsive down to tablet and smart phone sizes.
To access the new responsive embed codes, login to your IDX account and click "View Embed Code", the new responsive option is selected by default. Copy the new embed code and embed (or replace) it for each page, listing or building you've embedded on your non-RealtyNinja website.
This is what the option looks like:
Best practices and tips for making sure it looks good on your non-RealtyNinja website
- Breakpoint sizes are: 1224px, 960px, 768px, 480px, 300px so you may have to adjust the width of the content container to match a minimum of those values
- If you're using Wordpress, you may find better results if you switch the page template to full-width, as some Wordpress themes don't have a very wide content area when there is a sidebar present
- If you find there is too much empty room on the right side of the embedded iFrame, you can center the iFrame in the content container for a more balanced look
- Get in touch with us if you have any questions or need help, we want to make sure it looks the best it can on your non-RealtyNinja website