[Resolved] How I can make my blog page look like this?

[Anonymous]

Hello,

I am looking for my blog page were post are listed to be seen like this in 3 columns with border and this type of design, how I can achieve this? Since mine looks very messy

Thanks,

Sara

[Ying]

Hi Sara,

The header image contains Toy part, can be done with a header element.
https://docs.generatepress.com/article/header-element-overview/

1. For the posts part, go to customizer > layout > blog > archive, uncheck the Make first post featured box and Display posts in masonry grid box.

2. Set Excerpt word count to 0, leave the Read more label blank.

3. after the layout done, you’ll need some custom CSS to do the touch up.

Let us know if you need further assistance.

[Anonymous]

Hello Ying,

Yes steps 1 and 2 are not a problem, what I was looking for more was support to do step 3 help with css

[David]

Hi there,

you can add this CSS to add a border with radius corners to your posts:

.generate-columns-container .inside-article {
  padding: 20px !important;
  border: 1px solid #ccc;
  border-radius: 20px;
  overflow: hidden
}

You can also reduce the Content Separator in Customizer > Layout > Container. This will reduce the space between image / title / excerpt.

And in Customizer > Typography > Headings you can change the Archive Content Title (H2) font styles – this only applies to the H2 on the blog/archives.

[Anonymous]

Hey David,

Thanks a lot for the CSS help just one thing how can I add like 10px of padding on right and left so border is shown in mobile?

Thanks again!

Sara

[David]

Try this CSS:

@media(max-width: 768px) {
  #primary {
    padding-left: 20px;
    padding-right: 20px;
  }
}

[Anonymous]

Thank you very much David!! That’s exactly what I need it 🙂

[David]

Glad to be of help

[Author]

Posts