Need Help Adding 4 Columns to Home-Top Section – Executive Pro

[4WardMotion]

Can someone tell me what I need to do to get 4 columns added to the home-top section using Executive Pro? I have changed the css to be 25% and played around with the padding, but it will not put my forth column to the right of the other three. It keeps dropping it below. I have also looked in functions.php and I can’t see anything in there that would affect this.

Here is the page in questions: http://fultonhotelsolutions.com

Probably something simple, but I am not getting it figured out.

Thanks!

http://fultonhotelsolutions.com

[Brad Dalton]

Around line 1295 i changed the code to this:

.home-middle .widget {
	float: left;
	padding: 0 2.8%;
	width: 33.33333333%;
}

.home-top .widget {
	float: left;
	padding: 0 2.8%;
	width: 25%;
}

And it works for me.

---

Tutorials for StudioPress Themes.

[Brad Dalton]

Here's the full tutorial http://wpsites.net/web-design/change-home-top-featured-page-widgets-from-3-to-4-in-executive-pro-theme/

---

Tutorials for StudioPress Themes.

[4WardMotion]

Hi Brad,

Thank you very much for your tutorial. I tried doing this and it still isn't working for me. I also tried adding the centering of the title css that you added and that didn't work either.

Can you look at my site at http://fultonhotelsolutions.com and tell me if you can see what is going wrong?

Thanks for your help!

[Brad Dalton]

1. This is the code in your style sheet which is not the code i provided in my tutorial:

/*
Custom CSS Additions
---------------------------------------------------------------------------------------------------- */

.home .featured-content .entry-title h4 {
    font-size: 1.5rem;
    text-align: center;
}

Please remove the h4

2. Also, nth-of-type(3n+1) doesn't work for 4 columns which is why the 25% width doesn't work.

This works however the code is not needed.

.home-middle .widget:nth-of-type(3n+1), 
.home-top .widget:nth-of-type(4n+1) {
	clear: left;
}

---

Tutorials for StudioPress Themes.

[4WardMotion]

Yeah, I was trying that with the h4 as the other wouldn't work. I have changed it out now. My problem is still with the 4 columns not working. It is still dropping the 4th one below the other three. Are you not seeing it that way in your browser? I have tried IE, Firefox and Chrome browsers and all three render the same for me. It looks like it should be there, but it keeps dropping the 4th column below.

Any ideas?

Thanks!

[4WardMotion]

Here is how it looks on my end:

[Brad Dalton]

Works as the screenshot shows with your style sheet.

Here's your style sheet http://pastebin.com/akSzv0yZ

---

Tutorials for StudioPress Themes.

[4WardMotion]

Sorry, I'm not following you. Are you saying that my style sheet works fine for your example? I tried posting a picture of what I am seeing above, but it doesn't seem to be working.

Here is another try and posting what I am seeing on my end:

Thanks again for your help with this. I feel like I'm losing my mind, but I just can't seem to get this figured out.

[Brad Dalton]

I tested this style sheet so i know it works.

Replace the code in your style sheet with this code http://pastebin.com/akSzv0yZ

---

Tutorials for StudioPress Themes.

[Genesis Developer]

Please modify your styls.css file.

.home-middle .widget:nth-of-type(3n+1), .home-top .widget:nth-of-type(3n+1) {
    clear: left;
}

WILL BE

.home-middle .widget:nth-of-type(3n+1) {
    clear: left;
}

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[4WardMotion]

Ok, I just followed what genwrock told me to modify and that worked. I just looked at the style sheet you posted Brad and it looks like you removed that from the style sheet all together. If so, you might want to add that to your tutorial as it definitely worked for me.

Thank you both so much for your help. I can now go to bed knowing that I finally got this issue resolved with your help!

[Brad Dalton]

I tested the code without it and it works so its not needed.

This code relates to the home middle widgets and not the home top widgets.

.home-middle .widget:nth-of-type(3n+1) {
	clear: left;
}

The screenshot was taken without using that code and proves it works.

Its also not needed for the home middle widgets.

---

Tutorials for StudioPress Themes.

[Author]

Posts