Agency Pro: Home Page Wiget Questions

[dstrickland]

Hello,

I'm currently using Outreach Pro (www.efa-rep.org) and am considering switching to Agency Pro. I am not a power user by any means, so I have a simple question and am hoping for an easy to understand answer.

Do you have to use an upper and a lower row in the Home Middle and Home Bottom Widget Areas? I'd like to use either 3 boxes or 4 boxes in only 1 row. If yes, how do you change it to 3 or 4 boxes in only 1 row?

I see where you can change the number of boxes in the Featured Posts settings, but I assume this would require resizing, including the roll over features. I'm good with using plug-ins and doing some very minor code changes, but nothing extensive.

Thanks for your help.

http://www.efa-rep.org

[Christoph]

Hi,

it´s not really a problem to only use 3 posts in either of the widget areas.

It´s a bit more complicated to show 4 posts in a row instead of 3. It will require changes to the style.css.

http://prntscr.com/b84f6f

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[dstrickland]

Hi Christoph,

Thanks so much for the information. I'll start looking through the css to figure out what to change, unless anyone can share that for me.

Thanks again.

[dstrickland]

UPDATE: Never mind. I found a previous post with a link to a tutorial for exactly what I'm trying to do. http://wpsites.net/web-design/increase-agency-pro-themes-home-middle-widgets-from-3-to-4-columns/

[dstrickland]

Sorry. I spoke to soon.

I followed a tutorial to change the Agency Pro Home Middle and Home Bottom Widgets from 2 rows of 3 posts each to 1 row of 4 posts (http://wpsites.net/web-design/increase-agency-pro-themes-home-middle-widgets-from-3-to-4-columns/). In a nutshell, the images sizes were changed from 380x380 to 285x285. The rows were changed from (3n+1) to (4n+1). The featuredpost width was changed from 33.33334% to 25%. The min-height was changed from 380px to 285px. The only changes I made were according to the tutorial.

It looks great on several desktop browsers, but looks broken in all mobile formats. For example, on an IPhone and a Kindle Fire, when looking at with the devices oriented vertically, the photos for the Home Middle Widget appear to be too small and don't fill as much of the grey background as it should. It looks like it is floated left and should be centered, but all of the set up instructions say to keep the images floated left. When the phone and Kindle are turned horizontally, the images float partially in front of the text. The image is too small and floated left, so the right side of the text is peaking out from behind the image.

Clearly, I am missing something with the mobile responsive css. I'm wondering whether I need to make these same changes in the media only code even though the tutorial doesn't mention it. I'm not comfortable guessing and making random changes. Can anyone help? By the way, I generally can find code and replace it with good instructions, but I really am a novice. Thanks.

[Author]

Posts