Make Blog section into grid view

Support
#1

Hi,

I wanted to make my categories into grid view like this: https://createandgo.com/category/start-and-build-a-blog/

instead of what I currently have: https://digitalnomadquest.com/category/passive-income-business/

I also have “The Grid” plugin - not sure if this is necessary to do what I need?

Let me know - thanks!

Best,
Sharon

#2

Hey Sharon,

Thank you for reaching out to us. To do that, navigate to Theme Options > Blog > Archives and set the Style to Masonry, you can also adjust the columns to display (see screenshot)

Hope this helps!

#3

Great! Is there any way to make my title fonts smaller?

make it more similar to:

#4

Hello Sharon,

Thanks for updating the thread. :slight_smile:

Please use following CSS under X > Theme Options > CSS:

.category .entry-title {
    font-size: 1.6rem;
}
.blog .entry-title {
    font-size: 1.6rem;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#5

Hi I just tried it and the preview and updates haven’t changed? Please advise.

#6

Hi Sharon,

For the category page, please add this instead.

.archive .x-iso-container-posts.cols-2 .entry-title {
	font-size: 120%;
}

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache) after updating this will help you to avoid any potential errors.

Thanks,

#7

Hi - it is still not working for me. Am I doing something wrong? Please advise - thanks!

#8

Hey Sharon,

I tested the code provided by @friech using chrome’s developer tools and it works as expected, i checked the source code and I don’t find the code being added in your site. This could be only the caching issue, please clear your plugin’s cache and then deactivate the cache plugin and optimization services. Caching plugins are best to turn on only when you’ve finished building the site.

Let us know how this goes!

#9

Awesome it works! Is there a way to add more line spacing within the title as well? And maybe show less excerpt text?

#10

Hi Sharon,

You can add the line-height CSS property on the code I’ve provided above.

The current line-height of the entry-title is 1.05, adjust that accordingly.

That can be set under Theme Options > Blog > Excerpt Length


Hope it helps,
Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.