[Ginger]

Hi there,

I have used iHomeFinder and IDX Broker, the latter personally and both I have integrated on client Genesis sites. Both of these are good options, with iHomeFinder being a bit more user-friendly. I have also heard good things about Showcase IDX, although I haven't personally used their product yet. They have responded fast when I've contacted them with questions.

Regarding Diverse Solutions IDX, I have worked with it in the past but stopped a few years ago since often times their updates would break websites, which is unacceptable to me.
Unless someone has to use it (provided by their MLS for example) then there are other options to go with as mentioned.

I recommend having a look at those above and see which of them support your MLS area and go from there.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Right, to make that easier, it's best to have all of your styling in your style.css for that reason and to know what to target.

However, to answer your specific question, open your style.css with a text editor and scroll to the bottom and you'll see what are referred to as break points. The smallest entry is a max-width of 480px which is all of your mobile phones. To style for those screens you'd put your entries inside the brackets of that section. To target your text box widget content to style will be a challenge since you've hard coded the styling. I recommend re-writing it using my suggestion above. Then in your media section, you'd reference the same class name with styles that would change the font size, etc.

One more tip, you're using an H1 tag in that text box -- this is not recommended. For SEO purposes you should only use one H1 tag per page. This is taken care of for you in your header area - the logo link already is formatted with an H1.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Hi Shobha,

I noticed you have a lot of inline styling on the text widget box at the top, is that from a tool you're using or did you put the styling in the text box? I'm asking since it would be a lot cleaner to put that in your style.css and I can give you tips on how to do that. You can use a class name, say we call it black-box. In your text widget you'd enter

<div class="black-box">
put your text here

</div>

Then in your style.css file add a new section above the media queries at the bottom :

.black-box {
put your css in here
}

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Hi Gareth,

The home page of Magazine Pro has those 3 Featured Post widget areas. So it sounds like you'd rather have an archive-type page in the home bottom area? There's probably a way to do that by editing the front-page.php file or using a grid plugin there. I will see what I can dig up and get back with you.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Looks like this is working? If so can you change it to Resolved? Thanks!

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Hi there,

The best way to figure out how your example screen shot is styled is to see the CSS behind it with Inspect Element. By that I mean put your pointer over one of the borders, right+click and select Inspect or Inspect Element to see how it is styled. A tutorial on this is here and it includes a video:

https://www.nutsandboltsmedia.com/how-to-customize-your-genesis-child-theme-with-chromes-inspector/

You can create the top and bottom lines by adding a border to the comment-header section in your style.css file. Use something like

border-top: 1px solid #e6e6e6;

That is saying you want the border line to be 1px wide, solid (vs dotted) and use the color of #e6e6e6m which is a very faint gray. Of course you can change any of that you like. I do not know offhand how to get the orange vertical - again it would most likely be a border, in this case border-left, but I am not certain what element to use. It really would be worth your time viewing the video above to learn some CSS basics vs someone giving you the full CSS to copy and paste.

Hope that helps!

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

You might want to check out DesktopServer. It lets you run up to 3 sites locally on the free version. The best feature is you can create a new site by copying an existing site and it will take care of renaming all the source code files for you. Saves you unnecessary troubleshooting time.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

I see what you mean. In other themes, backstretch takes care of this. However, here, my suggestion would be to create additional image sizes for the smaller screens, and add that same block of CSS to those media query sections at the bottom of your style.css file. The only difference would be the URL for the image, would be the new smaller size for that screen....then you have all of your bases covered.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

I don't see any image? I can offer some tips if it's on your site to troubleshoot.

Worse case you'll just to add additional styling to your mobile entries found at the bottom of the file style.css.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Hi there,

Mobile first means that the CSS's "default" size is for zero and up basically until it hits one of those "min-width" values. Meaning, if you see some styling without any screen sizes, this is the default size. Then each media query it hits with the "min-width" value which in english says "if you're viewing this on a screen size of at least ###, use this styling".

The numbers are the screen widths of a device. If you're targeting Apple devices for example, the skinny iPhone 4 and iPhone 5 are 320px wide. The iPhone 6's are 400 and up, I cannot recall the exact number off the top of my head. Normally you won't need to have settings for each device, you can pick ranges. The iPad original sizes are 768px wide when it's portrait (tall) and 1024px in landscape (wide). Up from there is your small laptop sizes and so on until you reach "desktop" size which is often over 1200px.

My advice to you is when making changes, change your browser to emulate the screen size/device you need then you can troubleshoot using Inspect or Inspect Element. I use Chrome for my Browser and if you right+click and select Inspect, you turn on developer tools. You can click on the top left of the half-window where it says ""Toggle device toolbar". Then you can select the mobile device from a dropdown. You can see what styling.css is being applied on the right side of the screen.

Also if you google responsive design simulators or viewers you should find a bunch. Even StudioPress has one that lets you view multiple screens at a time:

http://www.studiopress.com/responsive/

Hope this helps!

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Hi there,

My suggestion would be don't use the Background image loader in the customizer....instead add this to your style.css file near the other .home-featured code. Assuming the image you want to use is in your media library, go there, click on the image and copy/paste the full path, then put that below where you see the place holder "YOUR URL". You may have to tweak the CSS further but this should get you started.

.home-featured {
   background-image: url("YOUR URL");
   background-attachment: fixed;
   background-size: cover;
}

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Ok, maybe REALTYNA has that, I didn't see it on their web site. I would ask them directly "can I use your plugin with any WordPress theme" and see what they say. This is the case for iHomeFinder or IDX Broker, you can use their IDX plugins with any WordPress theme, its just a matter of styling it (css) to match the theme colors, etc.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Hi Maxxz,

None of the search fields will show up until you have listings that have those taxonomies assigned to them. "Include these taxonomies in the search widget" shows in the widget.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Hi there,

It looks like you have a search field on your site. What did you want to change on it ?

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Hi there,

I have not heard of that one. I took a look at their website and it appears their WordPress product is integrated with using their theme. If you'd like to use something other than IDX Broker, have a look at iHomeFinder. Basically you want an IDX solution that works via plugin or script so you can use it the theme of your choice.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Check out the latest StudioPress theme called "Wellness"

http://my.studiopress.com/themes/

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Hi there,

StudioPress doesn't have a theme like this, but you might find something close on a 3rd party Genesis child theme site. This article mentions many of the Genesis theme shops:

https://www.nutsandboltsmedia.com/third-party-genesis-child-themes/

In the end you might save time by doing it totally custom.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

It looks like you've got this working how I was going to suggest it.....by putting a gallery on the portfolio page itself. You can use the built-in gallery or one of the many gallery plugins, but I think it would work this same --- a gallery on the portfolio page.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Hello,

What exactly do you mean by the library page? Do you have a link as an example?

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Ginger]

Hi there,

My suggestions would be to focus on the changes you've made to see which one changed the mobile menu. I'm looking at the demo for Streamline Pro compared to your site and I don't see anything off in comparing the style.css files. However, when going to Inspect element I do see an id of "menu-logged-in" that isn't on the demo site. Is that from a membership plugin? You might disable that and see if the mobile menu corrects itself.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Author]

Posts