Business Identity Theme – Grid resizing

• 

  greenoasispatrick · Member · Jul 29, 2016 at 6:21 pm

  • Copy link
  • Add topic to favorites

  Is their a way to have the grid layout resize differently? Right now when the window shrinks or in mobile view the grid reorganizes into like a 1×6 table. Is there a way to get it to resize to say a 2×3 table?

• 

  siobhyb · Member · Jul 31, 2016 at 7:41 pm

  • Copy link

  Hi there!

  You can add the following to the CSS panel of the Customizer in order to get each item in your grid to take up 50% of the screen on devices that are 640px in width or smaller:

  @media only screen and (max-width: 640px) {
      .four {
          width: 50%;
      }
  }

  Two items will then be displayed in each row of the table, as they’ll be taking up half the available space.

  Let me know how you get on with that or if you have any extra questions.

• 

  greenoasispatrick · Member · Aug 1, 2016 at 4:48 pm

  • Copy link

  Thank you! That worked for the most part but one of the icons still stays below the others. So it goes a row of 2 icons, another row of 2 icons, and then a row with one icon, and another row below that with just one. Is there a different way to make it 2, 2, and 2?

• 

  siobhyb · Member · Aug 1, 2016 at 5:30 pm

  • Copy link

  Ah, I see! The previous CSS I gave you was targeting each column rather than the items within the column.

  You could replace it with the following to target the items within the column and achieve the effect you’re after:

  @media only screen and (max-width: 640px) {
   .four h3 {
      width: 49%;
      display: inline-block;
  }
  }

  Let me know if that works out for you!

• 

  greenoasispatrick · Member · Aug 1, 2016 at 7:10 pm

  • Copy link

  works great! Thank you so much!

• 

  siobhyb · Member · Aug 1, 2016 at 10:13 pm

  • Copy link

  Glad to hear that! You know where to find us if extra questions come up, too.