How to reduce space between posts in the home page in grid layout?

how to reduce space between posts in the home page in grid layout ? for the posts without images, as shown in the preview…

Hi,

I am sorry, but I can’t see your picture (preview)
Or can you please to share your site URL here?

Regards,
Awan

Dear Awan,
thank u.
This is my site URL. http://02f.638.myftpupload.com/

in that i want to reduce the gap between posts, ie… i want to show my posts line after line in two or three columns . Please let me know how it is possible
just like how posts are displayed in ‘top stories’ and ‘big story’ in below URL.

hi awan,
also the below is the CSS code i used.

.entry-title a {
font-family: Arial
font-size: 15px;
font-style: normal;
font-weight: normal;
font-size: 2.0rem;
padding: 1px 9px 1px -2px;
height: 10px;
border: 1px solid blue;
box-sizing: border-box;

}

/*
code for lines above post
*/
.hentry a {
border-top: 1px solid #ccc;

}
/*
space between header and slider and slider and posts
*/
.content-wrapper {
background-color: #fff;
padding: 10px 30px 60px;
}

.masonry-layout .site-main .post {
border: 0;
padding-top: 0;
padding-bottom: 0;
}

i tried padding, margin and border but nothing worked… pls help

Hi,

Firstly please make sure you are using static page with front page template, then use “Recent post type B” widget on your front page.

hi,

this is newsanchor pro theme, i did not find any recent post type B” widget here. also in a news theme we cannot use a static home page, we should a have a not static home page for regular incoming new posts.

Hi,

I am using NewsAnchor Pro theme also in my local and this theme has 6 custom recent post widgets, A-F.

Please visit this demo page http://demo.athemes.com/newsanchor-pro/. In your site, you want to display your recent post like this http://prntscr.com/dwqbrp right? only small gap between posts if there is no featured image.

To make something like that, please follow this steps:

  1. set your home page tempplate to “Front page” http://prntscr.com/dwqd3e
  2. Go to customize > static front page > choose “a static page” > set your front page http://prntscr.com/dwqdwt
  3. Go to customize > widget > home page > add “Recent post type F” widget > set category for each row on “Recent post type F” widget http://prntscr.com/dwqgrr

Also, currently my site are running with version 4.7.1 of wordpress.

Regards,
Awan

hi awan,
Thank u, But for me same posts are getting repeated in all four columns.

02f.638.myftpupload.com

also is it possible to have a two column layout without featured images even for the first row??

Regards,
Chaitanya.

i am getting repeated posts in each column, as below

post6fgsddffffff post6fgsddffffff

post5 post5
post3 post3
post4 post4

also the layout is not extending to complete width of page.
http://02f.638.myftpupload.com/wp-admin/customize.php?url=http%3A%2F%2F02f.638.myftpupload.com%2F

pls hlp.

Hi,

Please set different post category for each row on the “Recent post type F” widget, so your post will not displayed repeatedly.

If you want it displayed in full width, please change your front page template to “Front page Extended” http://prntscr.com/dx1m4g
Then go to customize > widgets > home page - top > add “recent post type F” widget.

Regards,
Awan

hi awan,

i got the two columns as per ur settings, but problem is those two layouts are displayed in half the width of complete page and ined rest half of page other posts are displayed.
http://02f.638.myftpupload.com/
----------------------------------column1
MOVIE

post6fgsddffffff

post4
post2
post1
----------------------------------column2
CT_2

post3
----------------------------------column3
post6fgsddffffff

post5
post3
post4
----------------------------------column4
post6fgsddffffff

post5
post3
post4

i am getting column3 and column4 extra withourt any category.
also i want column1 and column2 to be extended in complete page without other data or space.

Hi,

If you set an empty category for the widget, it will automatically display recent post and you can’t display another post/widget in a half of those section.

Hmm but I can give you a trick if you want to display 2 widgets in on row of the "Home page - Top"
Here is the steps:

  1. Please entry - category for column 3 and 4 http://prntscr.com/dxjhnu
  2. For example, you want to add “Recent post type E” for another half of “Home page - Top”. This widget will displayed below the “recent post type F” as default. http://prntscr.com/dxjhy0
  3. Add this CSS code to display both widget in one row of “Home pge - Top”
.home-widgets-top .recent_posts_f, .home-widgets-top .recent_posts_e {
    float: left;
    width: 50%;
}
.home-widgets-top .col-md-3:nth-child(3), 
.home-widgets-top .col-md-3:nth-child(4), 
.home-widgets-top .roll-spacer {
    display: none;
}
.home-widgets-top .col-md-3 {
    width: 50%;
}

That’s it, let me know how it works.

Regards,
Awan

thanku very much awan… :slight_smile: its working :slight_smile: :slight_smile:

Also can u pls tell me, if there is any way to tranfer/copy posts to other page from front page.
i mean rather than simple copy paste , a kind of archive , to remove old posts from from page and tranfer to next menu page by keeping the user comments, likes history etc…

Hi,

Glad to know that the trick is works. Then for your another issue, please post it as new thread in NewsAnchor Pro forum.

Regards,
Awan

Hello Awan,

After implementing the below code(given by you 3 weeks back), i am unable to place a side bar widget, to the side of home top widget. The space is staying empty. Pls let me know how can i place a side bar widget here.

.home-widgets-top .recent_posts_e {
float: left;
width: 33%;

}

.home-widgets-top .col-md-3:nth-child(3),
.home-widgets-top .col-md-3:nth-child(4),
.home-widgets-top .roll-spacer {
display: none,
}
.home-widgets-top .col-md-3 {
width: 33.33%;
}

.home-widgets-top .roll-title{
padding: 0px;
}

http://timepassandhra.com

Regards,
Chaitanya.

Hi,

You can remove this part:

.home-widgets-top .col-md-3:nth-child(3),
.home-widgets-top .col-md-3:nth-child(4),
.home-widgets-top .roll-spacer {
    display: none,
}

Regards,
Awan

Hi Awan,
But still the side bar is not coming to side of (in parallel with) home top widget.

Regards,
Chaitanya.

Hi,

I noticed that there is no content for the top sidebar. Its empty http://prntscr.com/ea6awx
Are you sure you already add a widget to the top sidebar?

Regards,
Awan

hi awan,

pls check now. for adding side bar, i am using the path customise-> widgets-> sidebar-> add a widget

if that is not the process to add side bar to left of home top widget, pls let me know.

Regards,
Chaitanya.