Hi There,

Thanks for writing to us.

- Remove the blog post preview

Please share screenshots for this so that we can get a better understanding.

- Make the space smaller between the date and photo and also the space at the bottom of the blog

Please try this css:

.blog-recent[data-style*=classic_enhanced] .article-content-wrap, .masonry.classic_enhanced .masonry-blog-item .article-content-wrap {
    padding: 0%;
}

-- I want to make the blog heading text smaller

Please try this css:

.masonry.classic_enhanced h3 {
    font-size: 17px !IMPORTANT;
}

- I'd also like three posts to be shown on the homepage on desktop and just two on mobile

I am only seeing a single post, please let us know the other posts you are referring to.

- Remove the category from the featured image

Please try this css:

span.meta-category {
    display: none;
}

Thanks.

Hi there,

1) To remove the preview use the following CSS:

.masonry.classic_enhanced .post .excerpt{
    display:none;
}

2) For smaller blog heading text use the following CSS:

body.single.single-post #page-header-bg h1.entry-title {
    font-size: 2em;
}

Think this was dealt with in another ticket you have open with us.

3) About adjusting the number of posts per row on mobile and desktop, with the masonry blog style its not something we can control. The number of posts per page is set up automatically by the code and its not something we have control over. If you edit any of your posts, you should have a post configuration section with masonry sizing. You can use that to try and adjust the masonry layout a bit. See attached screenshot of the option we are referring to.

4) For smaller featured blog titles on the blog posts page here https://www.mentalhealthfc.org/#blog use this CSS:

.posts-container .post .post-header a {
   font-size: 0.6em;
}

Hope this clears things up.

Noah.

Hello again,

Thank you for getting back to us.

1. You can add this CSS to show 2 blog items per row on mobile.

@media only screen and (max-width: 690px) {
  #search-results .result, .masonry-blog-item {
      width: 48.1%!important;      
      margin-right: 10px!important;
      margin-bottom: 25px;
      margin-left: 10px!important;
  }
}

2. To adjust the padding, you can add this CSS.

.single .heading-title[data-header-style=default_minimal] h1, 
body[data-ext-responsive=true].single-post #page-header-bg[data-post-hs=default_minimal] h1 {
    padding: 40px 0 40px 0;
}

3. Try adding this CSS and let us know how it goes.

.post-area.masonry .post .post-meta {
    display: none;
}

I hope that all helps.

Kind regards,

Hi there,

2. Please try this css instead:

.single-post #page-header-bg[data-post-hs="default_minimal"] {
    height: 43vh !important;
}

Please let us know how this goes.

Thanks.

Hi there,

Please send in your admin login details so that we can test the css and make changes to what works for your site.

Thanks.

Hi there,

The css I sent last has reduced the spaces as shown here, please let me know whether this is helpful:

Thanks.

Hi there,

The blog element does not have the option to set the number of posts per row for different screens.
You are also using the masonry blog styling which means the layout of the blog is determined by the styles's javascript and the post configuration option on each individual post edit page. There is a masonry item sizing option in that post configuration section as shown here https://www.mentalhealthfc.org/wp-admin/post.php?post=220&action=edit.

If you need something with a bit more control you can try the post grid element in the page builder.
Hope this clears things up.
Noah.

Hi there,

Just to clarify the previous information, the blog element does not have the capability that is, setting the number of posts to show per row.

The masonry sizing option will dictate the number of posts per row.
See the attached screenshot of an example post-edit page.

You can try to edit your posts and adjust that to try and get the layout you want with the masonry styling on your blog element.

The other thing we suggested is you use the post grid element instead of the blog element. See attached screenshot post_grid_element.png

That element will allow the setting of number of posts per row.

Hope this is more clear.
Noah.

Hi there,

I am afraid we don't have the option to hide posts, we only have an option to hide rows and columns. However I would love to take this as a suggestion to help us improve on our coming features.

Please feel free to contact us in case of any other queries.

Thanks.

Hello there,

Thank you for getting back to us.

Here's our guide to hiding and displaying in rows using the page builder responsive elements https://themenectar.com/docs/salient/page-builder-columns/#:~:text=Fancy%20Box-,Responsive%20Options,-Width.

I hope that helps.

Kind regards,

Hello again,

Thank you for getting back to us.

Unfortunately, if you want to edit the default blog page, the page builder element does not apply to it. You'd have to create a blog page using the page builder and change the default blog page you've created: https://wordpress.com/support/posts-page/.

You can try adding CSS to hide the rows you want to hide on the blog page.

I hope that info helps.

Best regards