Display latests blog posts in 3 columns

Post Reply
NoWords
Jr. Bludit
Posts: 4
Joined: Fri Feb 09, 2018 7:25 am

Fri Feb 09, 2018 7:48 am

First of all hi Everybody :) :D

I have 2 small questions related bludit and a theme I am using with it:

Theme: https://themes.bludit.com/theme/clean-blog
  • Is it possible to display the latest blog posts in a row made of 3 columns? Please see attachemnt.
  • How can I render only latest 10 posts and then a "Load More Button"?
Thanks in advance :)
Attachments
Posts.jpg
Example
Posts.jpg (85.27 KiB) Viewed 374 times
User avatar
Edi
Site Admin
Posts: 1164
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Fri Feb 09, 2018 1:03 pm

NoWords wrote:
Fri Feb 09, 2018 7:48 am
  • Is it possible to display the latest blog posts in a row made of 3 columns? Please see attachemnt.
This is possible modifying the theme (CSS). You can use for example flexboxes:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • How can I render only latest 10 posts and then a "Load More Button"?
This can be set at "Settings" > "Advanced" > "Items per page".
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
NoWords
Jr. Bludit
Posts: 4
Joined: Fri Feb 09, 2018 7:25 am

Fri Feb 09, 2018 2:17 pm

Thanks Edi,

As you said in chat I will wait for you to post a hint on how to display different blog posts in the different columns :)
User avatar
Edi
Site Admin
Posts: 1164
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Fri Feb 09, 2018 6:23 pm

1) Open the template home.php of the theme (in /bl-themes/clean-blog/php) and modify line 18:

Exchange

Code: Select all

<div class="col-lg-8 col-md-10 mx-auto masonry">
with

Code: Select all

<div class="flex-container">
2) Activate the plugin HTML Code, click "Settings" and enter the following in the field "Theme Head":

Code: Select all

<style>
.flex-container {
   display: flex;
   display: -webkit-flex;
   justify-content: stretch;
   margin: 40px 0;
}
    	
.post-preview {
   margin: 0 30px;
   text-align: left;
   width: 30%;
}
</style>
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
NoWords
Jr. Bludit
Posts: 4
Joined: Fri Feb 09, 2018 7:25 am

Sat Feb 10, 2018 6:35 pm

Edi wrote:
Fri Feb 09, 2018 6:23 pm
1) Open the template home.php of the theme (in /bl-themes/clean-blog/php) and modify line 18:

Exchange

Code: Select all

<div class="col-lg-8 col-md-10 mx-auto masonry">
with

Code: Select all

<div class="flex-container">
2) Activate the plugin HTML Code, click "Settings" and enter the following in the field "Theme Head":

Code: Select all

<style>
.flex-container {
   display: flex;
   display: -webkit-flex;
   justify-content: stretch;
   margin: 40px 0;
}
    	
.post-preview {
   margin: 0 30px;
   text-align: left;
   width: 30%;
}
</style>
Hi Edi,

Thanks this works perfectly on desktop, but how can I display 1 column on mobile devices?

Shall I put the @media queries also in the "Theme Head"?
User avatar
Edi
Site Admin
Posts: 1164
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Sat Feb 10, 2018 7:36 pm

Oops, yes! I forgot this... :oops:
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
NoWords
Jr. Bludit
Posts: 4
Joined: Fri Feb 09, 2018 7:25 am

Sat Feb 10, 2018 8:20 pm

Edi wrote:
Sat Feb 10, 2018 7:36 pm
Oops, yes! I forgot this... :oops:
It’s ok :)

Question: how come you suggest the flex solution and not to work with bootstrap columns?
User avatar
Edi
Site Admin
Posts: 1164
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Sat Feb 10, 2018 9:35 pm

NoWords wrote:
Sat Feb 10, 2018 8:20 pm
Question: how come you suggest the flex solution and not to work with bootstrap columns?
I do not use Bootstrap, because I prefer simple coding instead of frameworks.

It could make sense, if a theme uses Bootstrap. But Bootstrap also uses flexboxes:

https://getbootstrap.com/docs/4.0/layout/grid/

and

https://medium.com/codingthesmartway-co ... 5405ce5ebf
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
Post Reply