• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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.

Register for full access

CSS Grid Columns No Sidebar Pro Theme

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.