One column blog on front page section

[Maria Evert Riveros]

Hello!

Thank you so much for a wonderful theme 🙂

Here is my question: I would like to show the three or four latest blogs on my front page. I think the Layout Two is great, but I would really like it to use only one column, and not two as is standard.

Can you please help me with a solution with CSS?

Here is my site: https://medellerudenbalsam.dk/

Thank you in advance.

Regards,

Maria

[themearile]

Hi Maria

Thanks for your beautiful compliment and we can expect a five-star rating from you.

Dont worry we are here to help you.

Yes, you can use the two-column blog layout to display the four posts on the homepage, Please follow the below help article to add the Read More button to the blog. This will help you to display the posts like demos.

https://www.wpbeginner.com/beginners-guide/how-to-properly-use-the-more-tag-in-wordpress/

Let us know if it works.

Thanks

• This reply was modified 1 year, 7 months ago by themearile.

[Maria Evert Riveros]

Hi!

Sorry, I may not have been clear, but my question was not regarding about the Read More button.

In the Blog front page section, I want the posts to only show in one column, and not two as it is standard. So I want the posts to be underneath one another, and not next to eachother.

I believe it should be possible by changing some CSS-code, no?

Thank you in advance.

Regards,

Maria

[themearile]

Hi Maria

Okay, please add the below css in the Additional CSS box to display the blog single column.

@media (min-width: 992px) {
body.home .list-view-news .col-lg-6 {
flex: 0 0 100%;
max-width: 100%;
}
}

Let us know if it works.

Thanks

• This reply was modified 1 year, 7 months ago by themearile.

[Maria Evert Riveros]

Thank you, that works wonders!
But one simple addition: How would you go about centering the container?
As default, the blog posts left align, not only the text, but the whole container. Is it possible to center it when you for example set the max-width to 70%? Se the front page as an exaple: https://medellerudenbalsam.dk/
Thank you very much in advance.
Regards, Maria

[themearile]

Hello Maria

Okay, please add the below css in the Additional CSS box to display the blog center alignment.

body.home .list-view-news .container:nth-child(2) .row {
justify-content: center;
}

Let us know if it works.

Thanks

[Maria Evert Riveros]

Thank you so much, this was exactly what I wanted.
Much appreciated!
So nice to have this forum to get so quick and nice help.
Thank you again 🙂

[Author]

Posts