Genesis featured post / page widget

[conception]

Hi Support forum,

Having an issue with the image sizes not looking equal in featured post widget - there are 3 in a row - however would like 4 in a row like featured page widget does - as images will then be smaller. Is there anyway to set the featured post widget to have 4 across in a row or 5 ... ??

Thanks,
Richelle

http://www.joypatersonhomes.com

[ᴅᴀᴠɪᴅ]

The maintenance plugin you have activated is stopping me seeing which child theme you are using. It will most likely be fixed with a little CSS tweak, but I'd need to know which theme your using so I can look at the code.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[conception]

Hi David - have just disabled the maintenance.. thanks

[ᴅᴀᴠɪᴅ]

The CSS that is affecting the number of columns is this..

.archive .content .listing, 
.full-width .featured-listings .listing, 
.full-width .featuredpage, 
.full-width .featuredpost .entry {
    background-color: #fff;
    color: #1a212b;
    float: left;
    margin: 0 0 1.5% 1.5%;
    overflow: hidden;
    padding: 0 0 40px;
    position: relative;
    text-align: center;
    width: 32.3333%;
}

.archive .content .listing:nth-of-type(3n+1), 
.full-width .featured-listings .listing:nth-of-type(3n+1), 
.full-width .featuredpage:nth-of-type(4n+1), 
.full-width .featuredpost .entry:nth-of-type(3n+1) {
    clear: both;
    margin-left: 0;
}

In the first bit, the width being 32.3333% is what is causing them to be in thirds.

The second bit is there to make sure the margins are correct. If you wanted four columns, you would need to change the percentage to something closer to 23% and change the nth-of-type in the second bit to target the correct post.

If this is over your head, another solution is to use this plugin which replaces the featured post widget and comes with extra options, such as being able to control how many columns, without needing to change any code.

In regards to the images being the wrong size, changing the columns might not solve the problem completely, you may need to use the regenerate thumbnails to get all the images to be the same size.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[conception]

Thanks Dave -

Problem is when editing that css... the 4th one still goes to the next line. ?

Also more concerned with making the container for the image the same across the boar d- so it crops the image effectively ... right now some of the heights are different

[conception]

I have left it on the site like that so you can see.. changed the width - and the 4th doesn't go next to the 3rd.. but a different line...

would actually like to go to 5 column. Can you assist.. The plugin you suggested - while great - created even more problems.

Thanks again - look forward to hearing from you .

[conception]

Hi there - can anyone offer a solution? Thanks again

[ᴅᴀᴠɪᴅ]

Hi, the second part of the code I copied was the bit for the margins. In other words, that is what is keeping them inline and stopping some go onto different lines.

It uses ':nth-of-type' to target the first post on each line. As we're changing the number of posts on each line, this also needs to be changed. From looking at your website, we can see that it is targeting the first post (as we want) but then also targeting the fourth post, forcing it onto a new line.

Changing the line refering to the posts to

.full-width .featuredpost .entry:nth-of-type(4n+1) works if you want four columns.

Changing it to

.full-width .featuredpost .entry:nth-of-type(5n+1)works if you want five columns.

If you're not sure why this works, I recommend reading Nth of Type - CSS Tricks. Once you understand it, you shouldn't have problems again, even if you want to change it again in the future.

Ps i noticed you changed the width to 20%. You are better off making it around 18.8% for five columns, as you need to account for the margins.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[ᴅᴀᴠɪᴅ]

Oh, about the images, did you regenerate the thumbnails? Assuming that the original, uploaded images have big enough dimensions, this should force all the images to be the same size. You just install the plugin, go to tools and then click regenerate. Then you can remove the plugin.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[conception]

Thanks Dave - Am playing around with nth in inspect element - and it is still doing nothing ?? I understand it should work - perhaps there is other code forcing this not to happen?

[conception]

okay got it to work in editing the css in inspect element... but the edit custom css in wordpress is not forcing the change..

I think the edit css comes with installing jetpack?

I would prefer to use this - as if I do theme update - the css won't stay if I edit it in editor ?

anyway around this?

Thanks again Dave for your patience and help 🙂

[ᴅᴀᴠɪᴅ]

It seems you have done it from my end. I can see the five columns. if you're not seeing the changes work on your end, perhaps you need to clear the cache in your browser.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[Author]

Posts