add a 4 column home widget area in Executive Pro

[staceychurch]

Hi I am currently using Exec Pro theme. This has a 3 colum home widget area how can I make this a 4 column. I have reduced the size of the images so I know another one will fit but it drops down and creates a row.
Ideally I would want 2 rows of 4 featured page images and not 3 rows of 3 boxes.

Hope that makes sense?

TIA

http://77.92.83.148/

[Victor Font]

Look in style.css around line 1486 for the following code:

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

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

Change it to:

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

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

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[staceychurch]

Thanks for your help Victor but this does not work.
Would you mind checking what I'm doing wrong please?

I am hoping to get 2 rows of 4

http://77.92.83.148/

[Victor Font]

You missed this:

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

It's still says (3n+1).

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[staceychurch]

It is there;
.home-middle .widget,
.home-top .widget {
float: left;
width: 25%;
padding:0;
margin:0;
}
.home-middle .widget:nth-of-type(4n+1),
.home-top .widget:nth-of-type(4n+1) {
float: left;
}

I have been tinkering with the code so you may have viewed it whilst I was adjusting.

I am still getting lots of rows with 3 across. I cannot seem to get 4 across. I have adjusted the width of the images, tried using thumbnails as well as featured images-still no luck.

Any advice please?

[Genesis Developer]

Replace

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

with

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

---

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

[staceychurch]

Thank you.

I see my mistake now. I was adding the css to the bottom of stylesheet instead of replacing the existing code.

Resolved.

[Author]

Posts