Center IDX form with custom CSS

Can anyone help me with some CSS? I’m simply trying to get this search form (on the right) to not take up the whole screen. I’d like to put it in a container but not sure if that is possible. I’d just like it centered on the page and take up 65% of the VW. On the left is IDX and the custom CSS box where I think this code should go.

Any help is appreciated. Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/listing-leaders?utm_medium=preview_link&utm_source=designer&utm_content=listing-leaders&preview=dbbe90d72dae27c3567bfde7cd0e6225&pageId=5d81b9e31374b92c5e53df42&mode=preview

First, what page are you trying to embed that search form into? Please share a published URL to it if you want custom CSS help.

Second, does your designer take a long time to load? 250 MB of assets might be the reason!

When using the CMS to display images from a collection, it is best to create a thumbnail to use on listing pages and then an optimized version for the detail page. 2+MB per image in the collection is a performance killer.

CloudApp

Here is the page from IDX Property Search
The page in my webflow project is called IDX

Thanks for the tip on the images. It was my understanding that once you upload an image webflow generates different versions of them to optimize the performance. So you’re saying to upload low res and a high res?

Yes; if you don’t want to load 250 MB in the designer on the agents page. The designer has to load the full image since responsive images only are visible on a published site. High res images really need to be no larger than the largest display area x 2 (for hidpi) (3x is overkill). Webflow recommends keeping images under 350kb but allows you to load up to 4MB per image. Webflow responsive image generation is not panacea. In your case it is rendering 8.4 MB on the agent page when published.

When large images are being reduced down to 500px (the size of your responsive images from webflow on desktop), they are highly compressed down. As a photographer image quality is an issue and I can tell you that reducing the steps in sizing produces a much cleaner image. I would target 1000px for the listing image versus 2100px. That would bring your upload size down to 264 KB.

Hopefully this helps.

More on responsive images in Webflow →

Forgot to answer your original question; easiest way would to just place the embed element in a container since you are using containers on the rest of the site. That will control the width of the embed.

That’s the problem, IDX doesn’t give you an embed option, I had to create a template page in Webflow with start and stop tags on my divs. So I think the styling is all held within IDX in that custom CSS box in the photo. I just don’t know the CSS code to drop in there.

I would do this →

  1. Create a div called .idx-wrapper; style it centered with a max-width:960px
  2. Put the start and stop idx divs in the same embed. Remove other embed.
  3. Move the collapsed embed inside of the div.idx-wrapper
  4. Test
  5. Style the div.idx-wrapper to add padding or margins as needed.
  6. Remove the old elements not used.

Also you should look at the script load (4MB). You are loading jQuery when it is already loaded for example.

1 Like

Thanks man! That did it.

As far as the jQuery stuff I have no clue what that means lol, I’ll look into it. When I optimize those images.