Grid layout

• 

  whiteandwalnut · Member · Aug 23, 2017 at 1:46 am

  • Copy link
  • Add topic to favorites

  Hi everyone,

  I need help adding a grid layout to my category pages. I’ve found a few CSS sites with help, but I can’t get it to work. I really want the blog to be the homepage on my site, but when readers go to click on the different categories, I want it show up as a grid of posts (rather than the blog format). I’m using the Olsen template.

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

• 

  uxcitizen · Member · Aug 23, 2017 at 5:05 am

  • Copy link

  Hi there, it looks like the Olsen theme provides a layout customizer within its customizer options panel under “Layout Options.” It says:

  “Here you can independently modify the blog layout, the category/tag layout and the layout for the rest of your pages. Additionally you can configure the length of the automatic excerpt and choose between numbered and older/newer pagination.”

  Olsen

  If the layout options customizer isn’t giving you the look you want, I’d try putting the question to the theme developers (CSS Igniter) on their site (linked above).

  If they don’t get back to you or tell you it’s not possible, come back here and we can talk how to do it in custom CSS!

• 

  uxcitizen · Member · Aug 23, 2017 at 5:16 am

  • Copy link

  Whoops, I apologize for being hasty in my suggestion. If the layout options doesn’t work as you want, I would suggest actually checking going to the theme developers via the Premium Themes forum – https://premium-themes.forums.wordpress.com/ first! Then look into custom CSS!

• 

  thesacredpath · Member · Aug 23, 2017 at 8:07 am

  • Copy link

  @hnotess, the docs you link to are for the self-hosted Olsen theme, and there are things that are different with the Olsen theme here at WordPress.com. The setup documents for our version of Olsen are here, and it does not include a Grid layout for the blog posts.

  @whiteandwalnut, add this custom CSS and see what you think. I’ve targeted just the category pages by using the category CSS class set in the opening body html tag for category pages.

  @media screen and (min-width: 600px) {
    .category #main {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }
    .category .hentry {
        width: 48%;
    }
    .category .page-header {
      width: 100%;
    }
  }

• 

  whiteandwalnut · Member · Aug 23, 2017 at 12:18 pm

  • Copy link

  @thesacredpath That’s closer to what I’m looking for! I like that it has the featured image with an excerpt of the text. Thank you!

  Can you help me make 2 columns? With the CSS you shared, it’s showing up as 1 column (https://whiteandwalnutblog.com/category/food/).

• 

  thesacredpath · Member · Aug 23, 2017 at 6:03 pm

  • Copy link

  I’m seeing some changes in the code I gave you above. Please delete what you have and copy/paste the above into your custom CSS. When I do that it works as it should.

• 

  whiteandwalnut · Member · Aug 23, 2017 at 11:59 pm

  • Copy link

  I copy/pasted the code above into the custom CSS. I wish I could send you a screen shot because when I click save/publish, it still shows up as 1 column (not two posts side-by-side). In the customizer screen, it shows up 2 side-by-side, but not after it is published. Any suggestions?

• 

  whiteandwalnut · Member · Aug 24, 2017 at 12:00 am

  • Copy link

  @thesacredpath I really appreciate your help!

• 

  whiteandwalnut · Member · Aug 24, 2017 at 12:23 am

  • Copy link

  @thesacredpath Do you see one column of posts here… https://whiteandwalnutblog.com/category/home/ ?

• 

  garysixtyeight · Member · Aug 24, 2017 at 1:14 am

  • Copy link

  Hi @whiteandwalnut,

  Please try using this CSS instead. It’s slightly tweaked:

  @media screen and (min-width: 600px) {
    .category #main {
      display: flex;
      display: -ms-flexbox;
      display: -webkit-flex;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }
    .category .hentry {
        width: 48%;
    }
    .category .page-header {
      width: 100%;
    }
  }

• 

  thesacredpath · Member · Aug 24, 2017 at 10:13 am

  • Copy link

  Hi @, there has been some ongoing discussion and the developers are working on a solution to the flex issue, but in the meantime, I’ve found a solution which involves the reordering of some of the declarations. Replace what we had given you with the following.

  @media screen and (min-width: 600px) {
  	.category #main {
  		display: flex;
  		flex-direction: row;
  		flex-wrap: wrap;
  		display: -ms-flexbox;
  		-ms-flex-direction: row;
  		-ms-flex-wrap: wrap;
  		display: -webkit-flex;
  		-webkit-flex-direction: row;
  		-webkit-flex-wrap: wrap;
  		-webkit-justify-content: space-between;
  		-ms-flex-pack: justify;
  		justify-content: space-between;
  	}
  
  	.category .hentry {
  		width: 48%;
  	}
  
  	.category .page-header {
  		width: 100%;
  	}
  }

• 

  jyzdesignblog · Member · Aug 24, 2017 at 10:59 am

  • Copy link

  Nice information here.

  As described above, you can edit the codes but I prefer to use the theme which supports grid layout.

• 

  whiteandwalnut · Member · Aug 24, 2017 at 11:40 am

  • Copy link

  Thanks @thesacredpath! It worked!

• 

  kathrynwp · Staff · Aug 25, 2017 at 4:04 pm

  • Copy link

  Glad to hear it! I’ll mark this thread as resolved but feel free to start a new one if you need help with anything else.