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

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

Home Forums Support How I can make my blog page look like this?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1643295
    Sara

    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

    #1643351
    Ying
    Staff
    Customer Support

    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.

    #1643946
    Sara

    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

    #1644341
    David
    Staff
    Customer Support

    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.

    #1645735
    Sara

    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

    #1645805
    David
    Staff
    Customer Support

    Try this CSS:

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

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

    #1652949
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.