Front page ‘grid’: empty spaces between posts

jacolinemoedzaam
(@jacolinemoedzaam)

7 years, 1 month ago

Hi there,

I have a question. I have been using this theme for two months now and I love it! However, I struggle with one specific detail:

My front page is set at ‘grid’, thus showing two posts next to each other. Nonetheless, sometimes there is only one post shown with a white gap next to it. I don’t like that look, because I want to have two posts next to each other everywhere.

I think this is caused by the fact that what is shown on the front page is determined by the excerpt lenght (in my case 40 words). Of course, sometimes you use longer words and sometimes shorter words. Leading to a different amount of lines and thus a different height of the box in which the post is displayed.

Is there anything I can do to make all boxes equally sized or to make sure there are always two posts next to each other?

Thank you in advance!

PS. today, suddenly my logo at the top op the page and picture at the side bar disappeared. I reuploaded them and they are back again, so this is no issue but I just wanted to let you know. Maybe more people struggled with it.

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

kristihugs
(@kristihugz)

7 years, 1 month ago

I had the same issue and finally just changed it to default so each post is in a vertical line…..I have not had any success getting help here yet, so I wish you good luck! I hope someone can solve it as I would like to go back to grid too! 🙂

Thread Starter jacolinemoedzaam
(@jacolinemoedzaam)

7 years, 1 month ago

@kristihugz Yes, going back to default is a solution of course! I’ve received support here before, so I’ll just be patient 🙂
If the problem gets solved, you will probably see a message in this topic so you should be one of the first to know!
Theme Author 96themes
(@96themes)

7 years, 1 month ago
Hello @jacolinemoedzaam,

We are extremely so sorry for late reply.Here to get equal height of grid box you have to write css so.Go to Appearance>>Customize>>Additional CSS,Paste following code
```
.blog-post-wrap.grid-layout{
    display: flex;
    flex-wrap: wrap;
}
.grid-layout .post{
   display: flex;
}
```
If you want more dedicated and swift support on the theme, Please contact us through [email protected]. Our support team is stand by to answer each and every one of your questions.

Thank you
Thread Starter jacolinemoedzaam
(@jacolinemoedzaam)

7 years, 1 month ago

Hello @96themes

Please don’t worry about the late reply. You are probably busy with other things. I am very greatful for your nice theme and your support!

And your solution works perfectly! Really happy with it 🙂

If you got time, one final question: what has changed compared to when there was empty spaces between the posts? I don’t think it’s the word count, but all the boxes became equal height now. (Just asking so I understand what you adapted, so I can maybe fix issues myself in the future.)

Thanks again!
Best, Jacoline

kristihugs
(@kristihugz)

7 years, 1 month ago

My apologies. I am new to this and it seems I am being chastised for my lack of patience. I will not bother you again. Thanks.
Thread Starter jacolinemoedzaam
(@jacolinemoedzaam)

7 years, 1 month ago
Hi @kristihugz

I am genuinely very sorry I gave you the feeling that you did something wrong, or that you had to be chastised. That was for sure not my intention! I hope you’ll accept my apologies.

I actually logged into the forum because I realized I had forgotten to tag you in my previous message. I wanted to let you know that my problem (the empty spaces on the front page) had been fixed and that you could use the code -provided above- too. Because your preferred viewing was grid too, right?

A while back an ICT-guy gave me another piece of advice. Namely to add titles to my additional css so I don’t forget what each piece of code stands for. You can do this as follows: /* Title */ Due to the /* */ construction this piece of text becomes yellow/orange. So for example for the code used on this forum, I added to my additional css:
```
/* No empty spaces between posts home page */
.blog-post-wrap.grid-layout{
    display: flex;
    flex-wrap: wrap;
}
.grid-layout .post{
   display: flex;
}
```
For me, it provided a lot of clarity in my addtional css section. I hope it helps you too! Good luck with your website. Looks great already 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Front page ‘grid’: empty spaces between posts’ is closed to new replies.