How I can make my blog page look like this?

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.

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

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.

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

Try this CSS:

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

Thank you very much David!! That's exactly what I need it :)

Glad to be of help