Add grid layout on category pages

whiteandwalnut · Member · Oct 5, 2017 at 12:24 am
Copy link

Add topic to favorites
I started a previous topic to get help adding a grid layout to my category pages. I got great help, but I’m now trying to see if I can change the grid layout so it only includes the titles and photos of the posts, but not the post excerpt.

Thanks in advance!

The blog I need help with is: (visible only to logged in users)
staff-imahappyengineer · Staff · Oct 5, 2017 at 1:40 am
Copy link
Hello @whiteandwalnut,

Please try to Add Custom CSS with the code below:
```
.home p {
    display: none;
}
```
Let me know if you need further assistance.

Regards,
Rose
whiteandwalnut · Member · Oct 5, 2017 at 12:09 pm
Copy link
Unfortunately, they did not do what I was looking for.
thesacredpath · Member · Oct 6, 2017 at 12:13 am
Copy link
Hi @, we need to use a slightly different CSS selector to target the summary paragraph below the image. Add the following and see what you think. After removing it, there was a lot of space between the image and the sharing section, so the second CSS rule tightens that up. You can adjust the 10px value as desired.
```
.category .hentry p {
  display: none;
}
.category .hentry .sharedaddy {
  margin-top: 10px;
}
```
whiteandwalnut · Member · Oct 6, 2017 at 1:07 am
Copy link
Thank you @thesacredpath ! That’s great!

I have a follow up question… Do you know why there are two posts side by side for the first three rows, but then they only go one post per row?
whiteandwalnut · Member · Oct 6, 2017 at 1:12 am
Copy link
Is it possible to remove the sharing section and ad from those pages, as well?
thesacredpath · Member · Oct 6, 2017 at 9:38 pm
Copy link
Hi, in your custom CSS, you have this Media Query which is making the posts into two columns on category pages.
```
@media screen and (min-width: 600px) {
 .category #main {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  -ms-flex-direction:row;
  -ms-flex-wrap:wrap;
  -webkit-flex-direction:row;
  -webkit-flex-wrap:wrap;
  -webkit-justify-content:space-between;
  -ms-flex-pack:justify;
  justify-content:space-between
 }
 .category .hentry {
  width:46%
 }
 .category .page-header {
  width:100%
 }
}
```
If you do not want to have the category pages in two columns, then remove the above from your custom CSS.

On the ad, you are on the WordAds program, so ads will show on your site.

See our Sharing support page and you can select where you want the sharing buttons to show.
whiteandwalnut · Member · Oct 7, 2017 at 1:10 am
Copy link
Thank you. I do want the posts to show up in two columns, but I’m wondering why they are only in two columns for the first few rows. After that, they go to a single column. Do you know why this is?
thesacredpath · Member · Oct 7, 2017 at 3:57 am
Copy link
Hmmm, this is a puzzler. The theme is coded a bit different. This is the best I can do with Infinite scroll active. What you might consider is to go into your WP Admin dashboard and disable Infinite Scroll at Settings > Reading and that should take care of the odd one per line thing going on. Also at Settings > Reading, set the number of posts to a multiple of 2, such as 12 or 20 or something like that which should keep from having one on a line.
```
@media screen and (min-width: 600px) {
 .category #main, .category .infinite-wrap {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  -ms-flex-direction:row;
  -ms-flex-wrap:wrap;
  -webkit-flex-direction:row;
  -webkit-flex-wrap:wrap;
  -webkit-justify-content:space-between;
  -ms-flex-pack:justify;
  justify-content:space-between;
   align-items: flex-end;
 }
 .category .hentry {
  width:46%
 }
 .category .page-header {
  width:100%
 }
}
```
I also added this
align-items: flex-end;
which aligns the images at the bottom edge. Before, everything aligned to the top of the titles, and when you have a title on one and two lines, the images were out of alignment. I think this looks better.
whiteandwalnut · Member · Oct 8, 2017 at 12:48 pm
Copy link
Thanks so much. Due to the ad, I removed the alignment to the bottom edge because it went to the bottom edge of the ad, so the first one was off.

Is there a way to change the font size of the titles?

Now, the columns go two, two, two, one, two, two, two, one…. Hmmmm. Any thoughts?
whiteandwalnut · Member · Oct 8, 2017 at 12:53 pm
Copy link
Also, I can’t find Settings > Reading. I don’t have that as an option in my settings in order to find infinite scroll. I only have Settings > General, Writing, Discussion, Traffic
achyuthajoy · Member · Oct 8, 2017 at 2:07 pm
Copy link
The infinite load plugin causes the odd post behaviour. When you scroll, infinite load plugin load x number of posts and puts a container around it.

So when your last row has only one post and the infinite load plugin loads the next set of posts, the container prevents the new posts from merging to the last row. Disabling the infinite load plugin will solve this issue.

To disable the plugin go to Plugins section.

To set maximum number of posts per page, go to Settings->Writing->Content types

Hope this helps.
Good day!
themagicrobot · Member · Oct 8, 2017 at 2:30 pm
Copy link
Just for the record, here at WordPress.com the Infinite Scroll tickbox is found in the wp-admin dashboard Settings/Reading by adding /wp-admin/options-reading.php to your address.

Infinite Scroll
whiteandwalnut · Member · Oct 8, 2017 at 3:49 pm
Copy link
Ok, everyone. I decided to just change themes altogether so that I could use a theme with a grid layout.

Here’s what I’ve done. In the primary menu, I have a “Categories” page. I’ve set that page to be a grid layout. But then, I have subpages (with my categories). I’d like those to display as a grid layout automatically. I feel like this is supposed to happen, but I don’t know why it’s not.
thesacredpath · Member · Oct 9, 2017 at 9:12 pm
Copy link
Hi, if I go to Home, or one of your other categories, I’m seeing the posts in a grid. Do you still need help with this?

No items found.