Display 3 Columns Genesis Featured Posts in Home Section 2 of Parallax PRO theme

3-col-featured-post-parallax-pro

By three steps I created 3 columns featured posts in Home Section 2 widget area of Parallax PRO child theme.

1. Setup thumbnail size and regenerate the thumbnail
2. Setup Genesis Featured Post Widget
3. Add CSS in style.css file

1. Setup thumbnail size and regenerate the thumbnail

Login to dashboard and open the functions.php file on theme editor (Appearance->Editor). Add the following code:

add_image_size('square-thumb', 365, 242, true); // you can change the image size based on your site design

Now save the file. Install “Force Regenerate Thumbnail” plugin and regenerate the thumbnail of your existing images.

2. Setup Genesis Featured Post Widget

Go to widget page (Appearance->Widget) and drag&drop the Genesis Featured post widget in Home Section 2 box. Setup the “Number of Posts to Show:“, enable featured image, choose the “square-thumb (365×242)” from drop down, check “show post title” checkbox and select “No Content” from Content Type drop down. Now hit on save button.

3. Add CSS in style.css file

open the style.css file on theme editor (Appearance->Editor) and add the following CSS:

.featuredpost .post {
    width: 31.6239%;
    float: left;
    margin-left: 2.5641%;
 }
.featuredpost .post:nth-of-type(3n+1){
  margin-left: 0;
}
.featuredpost .entry-title {
    font-size: 24px;
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
  .featuredpost .post {
    width: 48.717%;
  }
  .featuredpost .post:nth-of-type(3n+1) {
    margin-left: 2.5%;
  }  
  .featuredpost .post:nth-of-type(2n+1) {
    margin-left: 0;
  }
}
@media only screen and (max-width: 480px) {
  .featuredpost .post {
    float: none;
    margin-left: 0;
    width: 100%;
  }
}

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

10 Discussion to This Post

  1. This is not working exactly right for me… has anything changed in the code recently to maybe make the percentages a bit different? I can’t seem to get the columns to display properly. You’ll see from the site how the columns break apart after the first column or so.

    Any advise?

    • Looks like my issue had to do with the excerpt link… I believe it is resolved now. If you notice anything, though, feel free to let me know if I can display it any differently for better results.

      Thanks!

  2. It displays 3 column in Firefox but Chrome displays it in one column. Is there a way to make it display the same to both? Thanks.

  3. THANK YOU so much for sharing this. Huge help. I had to modify it for a few different numbers of columns but it’s working great.

  4. Would this code work equally for pages in Parallax if I changed all the “post” to “page” in the code?

    • Yes. it will work. You need to change the CSS little bit like .featuredpost .post will be .featuredpost .page. I did not test yet. But it would be work.

Leave A Reply

Your email address will not be published. Required fields are marked *