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

8 Discussion to This Post

  1. 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.

  2. 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.

  3. 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 *