Pique Theme – Change Grid View

• 

  bradleygro · Member · Dec 4, 2017 at 4:08 am

  • Copy link
  • Add topic to favorites

  I’m looking to add custom CSS to change the 3-grid panel in my Pique Theme to a centered 2-grid.

  There are only 2 tutors for my site, so I would ideally remove the 3rd panel I’ve added with a “&” symbol to space the content and have 2 centered panels with the tutor bios.

  I’ve been using Chrome/FireFox developer modes for days trying to identify what is controlling said 3-part grid to remove one of the grid columns.

  The site is: https://teachmefrancais833842605.wordpress.com

  Thanks!

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

• 

  diegopereira91 · Member · Dec 4, 2017 at 4:30 pm

  • Copy link

  Hello Pique,

  Please see if this code works for you:

  @media (min-width: 768px) {
  .pique-grid-three article {
       width: 45%!important;
  }
  }

  PS: You will need to delete the other posts (the “&” and the spacing post).

  Cheers

• 

  bradleygro · Member · Dec 4, 2017 at 5:39 pm

  • Copy link

  Fabulous! It worked! Thanks so much!

• 

  bradleygro · Member · Dec 4, 2017 at 5:47 pm

  • Copy link

  It wasn’t immediately obvious, but it’s still a bit skewed to the left of center (or the spacing in between the two is not wide enough to offset the second column (“Emilee” more to the right.

  How would I adjust that?

• 

  diegopereira91 · Member · Dec 4, 2017 at 6:01 pm

  • Copy link

  You can tryto modify the margin-right of the first article:

  @media (min-width: 768px) {
  .pique-grid-three article:nth-of-type(1), .pique-grid-three article:nth-of-type(3n+1) {
      margin-right: 65px!important;
  }
  }

  This should fix the aligment :)

• 

  bradleygro · Member · Dec 4, 2017 at 6:11 pm

  • Copy link

  To the rescue – that worked like a charm!

  Thanks again for all the help!