• 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

Custom Genesis Layout Setting Using CSS Grid

This code enables you to add a custom layout setting which uses CSS Grid. You can select the setting under Layout Settings on any single page, post or archive page Edit screen.

This solution enables you to determine the stacking order on mobile devices so you can set the sidebar to display before the content at any screen width using the grid-template-areas property in your media queries.

Demo Video

Shows how the custom layout setting enables you to control the stacking order of the content and sidebar on smaller screens.

Works in the following modern browsers.

Tested using the Genesis Sample child theme by StudioPress.

Code Installation

There’s 3 steps :

Step 1 : From the download folder, upload the image named css-grid.jpg to your child themes root directory.

Step 2 : From the download folder, copy & paste the PHP code from the functions.php file and paste it at the end of your child themes functions.php file.

Step 3 : From the download folder, copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

Register or login to access the download folder :

Register for full access

CSS Grid Columns Layout

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.