Problem with "Latest News" Section

Illdy
1

Hello,

I’m having a problem with the latest news section. There’s no problem when I choose 3 articles, but when I choose 4+ articles to be shown, the 4th article becomes attached to the 3rd article’s element. I’m not sure how or why, but it shows like that on different browsers and devices.

Everything else is fine, the 5th and 6th posts (If I choose to display 6 posts) will show and look fine. I’ve attached a screenshot to help give a better idea of the problem. The post right under the 3rd one becomes attached to the 4th post, which displays right underneath.

Hope someone could help me with this!!
Thanks in advance!

2

Hello,

Can you please provide the website link, as well?

There must be a difference in height therefore some items jumps around.

You need a CSS rule for it, something like:

#latest-news .col-md-4:nth-child(3n+4) { clear: both; }

Let me know if I can have a live investigation or maybe if the above code did the trick.

Regards

3

Hey Ion,

Thanks for the reply. I tried that code but it didn’t help too much.

I’ve now removed the code you gave me, my website: nextlevellivingmastery.com

I’ve left the “Latest News” section to display 6 articles. You’ll see how the 6th article gets stuck to the 3rd. When I tried the code you sent me, the 4th and 5th articles were getting stuck to the 1st and 2nd.

Side note: The code you gave me looked somewhat okay on a full desktop screen, but didn’t work well with mid-sized / tablet screens.

Appreciate the help!

Thanks

4

Hello,

This is quite strange, I see the code working alright on my environment, so maybe you didn’t load it alright:

#latest-news .col-md-4:nth-child(3n+4) {
    clear: both;
}

Ideally, the above CSS code should be placed in a child’s theme style.css

But you can use a plugin like Simple Custom CSS or place it directly in Dashboard > Appearances > Editor > Style.css but keep in mind that this will get erased if you replace/update the theme files.

Either way, the issue will get resolved in the upcoming theme update, so thank you for letting us know about it.

Regards

5

Hey Ion,

It is indeed strange. I added the code you sent me, and this time, instead of attaching the 3rd and 6th article together, it now attaches the 2nd and 4th. I used the Simple Custom CSS plugin to add the code. Is anything wrong?

Eagerly looking forward to an update!

Thanks for all the help

6

I see that your homepage news are displaying alright, have you managed to fix this?
Regards

7

Hey Ion,

No I haven’t managed to fix it… It’s fine at a full screen desktop view, the problem arrives for smaller screen/ windows.

Here are a few screenshots I’ve added.

8

Hey Ion,

I have one more question to add on,
When the window is smaller (as in when the window takes up about 70% of the screen), 2 things happen:

  1. The menu at the top: the last 2 items get moved under the first two. Could I possible have it so that they’re alighned with the first two? Actually, could I have them alighned under the 3rd and 4th tab on the menu?

  2. How can I add a very small gap between the two buttons “What do I need” and “start learning”?

Once again, I appreciate the help.

9

Hello,

Indeed there seems to be some issue on smaller displays when there are 2 posts on line, not 3 like on desktops or one on mobile devices. Please wait a little more as this issue should and will be resolved in the next days via a theme update.

Try this CSS code to handle the button spacing:

#header .bottom-header .header-button-two {
    margin: 20px;
}

Try this for menu sizing:

#header .top-header .header-navigation ul li {
    margin-left: 22px;
    font-size: 15px;
}

Kind regards

10

Thanks Ion,

The two codes for the menu and button spacing work great!

And yes you’re right, it’s worse when there are 2 posts per line. Eagerly looking forward to the update!

Thanks

11

I’m happy that the other code met your needs!

Thank you for your patience regarding the update.

Regards

12

Hey Ion,

Just checking in – Is that new update that fixes the “Latest news” section complete?

I have another question;
How can I change the padding on the “contact” section? I’ve managed to change the size of the “margin-bottom” section, but I want to shorten the padding at the top and bottum of the section. Could you please tell me the CSS code for doing this?

Looking forward to hearing back ,

Thanks!

13

Hello,

You should try this CSS code to deal with the contact section top and bottom padding:

#contact-us {
    padding: 20px 0 0px 0;
}

As for the update, yes, you should find the display issue from the news fixed, as well.

Best regards

14

Hey Ion,

Thanks for the contact code, worked great!

As for the update, I just updated to 1.0.34, but the “latest news” section still has the same problem! Just like last time, it looks very bad when the window makes them into columns of 2 (still creates 4 rows instead of a clean 3 rows).

I’ve tried it with and without the code you gave me to fix it. That code seems to mess it up further, so I left it as it is. Could you let me know if there’s any other fix for this?

Again, Thank you very much for the help.

15

Hello,

This is quite strange, the issue should have been resolved by now.

Try using this CSS could, it might do the trick:

#latest-news .clearfix { display: none !important; }

Let me know more about it.

Sorry for all the trouble!

Regards

16

Hey Ion,

Tried the code you gave me, it did something but not what we were hoping for.
Check out the website, I’ll leave that code there. Here are two snapshots as well.

No trouble, I appreciate the help.

17

Sorry I forgot to crop the two pictures above ^^ so I uploaded doubles. Seems you can’t delete attachments while “editing” a post on here.

18

Okay I just found another problem that’s worth mentioning.

The positioning for the “latest news” (like how they are arranged with rows of 3) changes depending on WHICH article is placed there. For example, right now the section looks fine. But if I change the “post date” of the most recent article and switch it with the 2nd most recent post… etc, the rows mess up even with 3 rows!

It looks like the length of each post (like the vertical length of each post in the latest section) affects the positioning as well. Is there a way to force all 6 “latest” articles to appear as the SAME size? Not sure if it’ll help our cause, but hoping it will.

Thanks.

19

Hello,

Additionally, try this CSS code, might do the trick:

#latest-news .illdy-blog-post {
    min-height: 700px;
}

This will indeed force them to a minimum same height.

I’m really sorry for the trouble so far, hopefully this last bit of code will get it working alright.

Regards

20

Hey Ion,

It worked!! Thanks so much for the help!!