Using Responsive IDX Embed Codes

Note that this article may be technical and if your eyes are spinning reading it, please pass it along to your web design team.

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:

Video demonstration (note the video was made before our responsive size was available):

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

Still need help? Contact Us Contact Us