Changing Grid Page Layout to 3 across instead of 4

• 

  erinsills · Member · Apr 5, 2017 at 9:04 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I’m wanting to use the grid page template from the Maisha theme, but was hoping to have it display 3 boxes across instead of the default 4.

  I’m quite comfortable in CSS—especially using it to style elements. CSS for layout (especially responsive) is a little more difficult for me, but I have a good understanding of how it works, so I think just having some tips to get me started would help out a lot!

  thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 6, 2017 at 7:23 am

  • Copy link

  Hi there, I don’t see a grid page template on the site you reference right now, but working off the Maisha demo site I came up with the following. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  @media screen and (min-width: 59.6875em) {
    .page-template-grid-page .fourcolumn {
      width: 31% !important;
    }
  }