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

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%;
  }
}
This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.