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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.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 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!
is this solution work for magazine pro themes ?
No
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.
Can you share your site URL?
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.
Thank you so much! This has been driving me nuts for two days.
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.