No Sidebar Pro Front Page Using CSS Grid

No Sidebar Pro front page displays posts in uneven columns ( 58% & 38% ) by filtering the post class and adding custom classes using a wp_query counter. Nothing wrong with this but if you want to modify the layout on any page of the archive, you might find CSS Grid easier to work with.

In this tutorial, i’ll show you how to modify the front page template and CSS Grid so you can change the size & position of each entry in the loop.

This solution also enables you to change the layout on specific paginated pages as you can see in the following screenshot & video demo where the 2nd page displays a different layout than the 1st & 3rd pages.

Demo Video

This shows how the 1st page in the front page archive displays exactly the same as the default. The 2nd page uses CSS Grid to change the layout so each 2nd row is displayed either full width or in 50/50 columns.

CSS grid ships with the next Edge update on the 17/10/2017.

Based on the following question from a member of the Genesis community & written for registered members :

How do i change the featured image size in the no sidebar pro themes front page layout.

Easy Code Installation

There’s 3 steps once you download the zipped folder below :

Step 1 : Replace the default front-page.php file in No Sidebar Pro with the front-page.php file from the download folder.

Step 2 : Copy & paste the CSS from the style.css file in the download folder to the end of the No Sidebar Pro themes style.css file.